JSFiddle - React, Tailwind, and code Playground

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;
			}
			.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;
			}