Два divs в одной строке

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> 

Первое окно, которое содержит текст имеют огромное пространство на вершине, я хочу, чтобы удалить это пространство и установите два div в одной строке. Так вот как это выглядит:

Вот как это должно быть, как:

Answer 1

Добавить основной:

vertical-align: top; 

в классе ".bluebox"