<ul class="notATable">
<li>
<label>Label</label>
<div>Value</div>
</li>
<li>
<label>Label</label>
<div>A different</div>
</li>
<li>
<label>Label</label>
<div>Another Value</div>
</li>
</ul>
// css
.notATable {
display: table;
list-style: none;
padding-left: 0;
}
.notATable > li {
display: table-row;
}
.notATable > li > * {
display: table-cell;
line-height: 20px;
font-size: 14px;
margin-top: 16px;
}
.notATable label {
font-weight: bold;
text-align: left;
padding-right: 16px !important;
white-space: nowrap;
}
.notATable div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}