Misaligned 2 row 2 column li tag cotents

Question

У меня есть раздел страницы, который имеет 2 столбца и 2 строки текста.

столбец 1 и содержимое столбца строки 1 всегда должны быть выровнены в одной строке. Проблема, с которой я сталкиваюсь, заключается в том, что они не являются. Столбец 2 выравнивается по строке или 2 под столбцом 1. Это поведение в скрипке, но на моем сервере это наоборот. Это происходит из-за медиа-запроса для меньшего экрана kciks.

Есть ли способ, я могу это исправить?

HTML код:

<section class="carousel freedom container"> <!--Freedom section --> 

<ul class="two-col left-col"> 
<li class="pen"> <span class="icon-text"> <em>Work</em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT</span> </li> 
<li class="arrow"> <span class="icon-text"> <em>Access </em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT</span> </li> 
</ul> 
<ul class="two-col right-col"> 
<li class="phone"> <span class="icon-text"> <em>Go </em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT</span> </li> 
<li class="download"> <span class="icon-text"> <em>Stay </em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</li> 
</ul> 
</section> <!--End of Freedom carousel --> 

Fiddle с помощью CSS: http://jsfiddle.net/LaL6c4cx/

Answer 1

Вы должны использовать vertical-align: top; вашему .left-col, .right-col класса.

JSFiddle - DEMO

CSS:

.left-col, .right-col { 
    list-style: none; 
    width: 47%; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    vertical-align: top; 
} 

Answer 2

Добавить вертикально на классе UL:

.left-col, .right-col { 
    list-style: none; 
    width: 47%; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    vertical-align: top; 
} 

См jsFiddle

Answer 3

Вы можете использовать display: table:

.container 
{ 
    max-width:1050px; 
    margin: 0 auto; 
    display: table;/*Add display table*/ 
} 

.left-col, .right-col { 
    list-style: none; 
    width: 47%; 
    display: table-row;/*Add display table row*/ 
    margin: 0; 
    padding: 0; 
} 

.two-col li { 
    padding-left: 30px; 
    margin-top: 20px; 
    display: table-cell;/*Add display table cell*/ 
    padding-bottom: 30px;/*Add for the space between rows*/ 
} 

fiddle