HTML и CSS: исправить неверный список

Question

Мне нужна помощь в исправлении списка из 2 столбцов.

Проблема в том, что правый столбец вторгается в левый, если используется более одной строки.

Другая проблема заключается в том, что если в левой колонке имеется более одной строки, содержимое внутри правого столбца появится внизу.

Разделительная линия между колонками также действует странно с более чем одной строкой (см. Примеры ниже).

Обратите внимание, что я хотел бы сохранить столбцы «Заголовок» и «Описание» в отдельных HTML-тегах (по крайней мере один из них внутри тега), потому что мне это нужно для адаптивного макета CSS.

ul { 
 
    list-style: none!important; 
 
} 
 
ul.my-list>li { 
 
    width: 550px!important; 
 
    position: relative; 
 
    padding-left: 30px; 
 
    padding-right: 15px; 
 
    background: 0 0; 
 
    border-radius: 0!important; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    background: #EEE; 
 
} 
 
ul.my-list>li span { 
 
    width: 140px; 
 
    border-right: 1px solid #E0E0E0; 
 
    display: inline-block; 
 
    padding: 3px 0; 
 
    line-height: 38px; 
 
    margin-right: 15px; 
 
}

<ul class="my-list"> 
 
    <li><span>Title</span>Description. Not too many words – displays well.</li> 
 
</ul> 
 
<br> 
 
<br> 
 
<ul class="my-list"> 
 
    <li><span>Title</span>Description. More words – this goes wrong. Really wrong. Seriously...At least the "Description" column should not intrude into the "Title" column.</li> 
 
</ul> 
 
<br> 
 
<br> 
 
<ul class="my-list"> 
 
    <li><span>Title with many words acts weird too</span>Description. How to fix the "Description" column, so it would start from the top side, not from the bottom?</li> 
 
</ul> 
 
<br> 
 
<br>

Answer 1

Я решил эту проблему, в основном за счет создания два разделенных <span> теги для каждого из столбцов и использования display: inline-flex; для всего <li> тег.

Решение является адаптируемым для CSS макета и работает со всеми размерами окон.

JSFiddle: http://jsfiddle.net/tay06de4/4/

Answer 2

попробовать это

ul.my-list>li span { 
 
    float:left; 
 
    } 
 

 
ul.my-list>li { 
 
    min-height: 80px; 
 
    
 
    }