JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<ul class="checklist">
    <li>
        <div class="icon-holder">	<i class="faicon fa-check"></i>

        </div>
        <div class="item-content">
            	<h3 style="margin-bottom:5px;">This will be title</h3>
This is random text. This is random text. This is random text. This is random text. This is random text. This is random text. This is random text.</div>
    </li>
    <li>	<span class="icon-holder">
			<i class="faicon fa-check"></i>
		</span>

        <div class="item-content">
            	<h3>This will be title</h3>	This is random text.</div>
    </li>
</ul>

CSS

.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;
                vertical-align:top;
			}
			.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;
			}