I am seeking assistance with resolving an issue in a 2-column list layout.
The problem arises when the content in the right column spills over into the left column if it exceeds a single line.
Additionally, when the content in the left column spans multiple lines, the content in the right column ends up at the bottom instead of aligning properly.
Furthermore, the line separating the columns behaves oddly when there is more than one line of content (see examples below).
It is important to keep the "Title" and "Description" columns within separate HTML tags for Responsive CSS layout purposes.
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>