html - 同じ行に 2 つの div

Question

テキストを含むボックスとビデオを含む別のボックスがあります。jsfiddle コードは次
のとおりです: CSS:

.bluebox{
    background-color: #1EAECE;
}
.orangebox{
    background-color: #FF8800;
}

HTML:

<div style="margin-top: -13px;">
<div class="bluebox" style="display: table-cell;width: 52.2%;">
    <div class="title">Usage</div>
    <ul>
        <li>Moisten with warm water to activate the ingredients.</li>
        <li>Apply the bar directly on face & body.</li>
        <li>Massage the creamy texture into your skin.</li>
        <li>Allow the emulsion time to permeate into the skin.</li>
        <li>Rinse off.</li>
    </ul>
    <p>Suitable for Face wash, Body wash, Shaving, Sensitive areas, Intimate parts, Shower & Bath.</p>
</div>
<div style="display: table-cell;width: 0.7%;"></div>
<div class="orangebox" style="display: table-cell;width: 47.3%;">
    <video width="418" src="http://brexes.com/Images%20and%20Videos/GamilaSecretVideo.mp4" controls></video>
</div>
</div>

テキストを含む最初のボックスの上部に大きなスペースがあります。このスペースを削除して、2 つの div を同じ行に設定したいと考えています。したがって、次のようになります。

次のようになります。