I am struggling to create a <ul> list with a specific width of 50%. When the text spans more than one line, it is causing an unwanted margin at the top of the second LI element. Please refer to the screenshot linked below for visual clarity.
https://i.sstatic.net/pDyH8.png
Here is my current code snippet:
.checklist {
list-style-type: none;
display:block !important;
margin:0;
padding:0;
}
.checklist li {
margin-bottom:4px;
width: 40%;
margin-top:0 !important;
display:inline-block;
padding:0;
margin:0;
}
.checklist .icon-holder {
margin-top:1px;
background:#444;
font-size:11px;
line-height:11px;
color:#fff;
width:65px;
height:50px;
text-align:center;
vertical-align:middle;
float:left;
display: table;
}
.icon-holder i {
display: table-cell;
vertical-align:middle;
}
.item-content {
margin-top:0 !important;;
margin-left:80px;
}
.item-content h3 {
margin:0;
}
Access the jsFiddle link for further reference: https://jsfiddle.net/92458m8v/