CSS note

• Lorem ipsum dolor sit amet, consectetur adipiscing elit

  ABCCDE

• sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  ABCCDE

• sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  ABCCDE

• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

  ABCCDE

• nisi ut aliquip ex ea commodo consequat.

  ABCCDE

HTML

<input type="checkbox" id="show-flex" value="flex" name="show-flex" />

<ul class="list">
	<li class="list-item">
		<div class="block-1 square"></div>
		<div class="block-2 body">
			<h3 class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3><div class="categories"><span>ABC</span><span>CDE</span></div>
		</div>
	</li>
	<li class="list-item">
		<div class="block-1 square"></div>
		<div class="block-2 body">
			<h3 class="title"> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
			<div class="categories"><span>ABC</span><span>CDE</span></div>
		</div>
	</li>
	<li class="list-item">
		<div class="block-1 square"></div>
		<div class="block-2 body">
			<h3 class="title"> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
			<div class="categories"><span>ABC</span><span>CDE</span></div>
		</div>
	</li>
	<li class="list-item">
		<div class="block-1 square"></div>
		<div class="block-2 body">
			<h3 class="title">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</h3>
			<div class="categories"><span>ABC</span><span>CDE</span></div>
		</div>
	</li>
	<li class="list-item">
		<div class="block-1 square"></div>
		<div class="block-2 body">
			<h3 class="title">nisi ut aliquip ex ea commodo consequat.</h3>
			<div class="categories"><span>ABC</span><span>CDE</span></div>
		</div>
	</li>
</ul>

CSS

.block-1{
 width:32px;
 height:32px;
 float:left;
}
ul.list .block-2{
 width:80%;
 height:auto;
 margin-left:50px;
}
input:checked ~ .list .block-2, .entry-content .categories span{
 border:1px solid rgba(127,127,127,.3);
}