JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" id="news">
	<div class="news-inner">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
	<div id="tv">
		test
	</div>
</div>

CSS

* { box-sizing: border-box; }
#news { width: 800px; background: #ccc; }
#news .news-inner {width: 75%; display: inline-block; }
#news ul { list-style: none; width: 100%; padding: 15px; font-size: 0;  }
#news ul li { font-size: 14px; display: inline-block; width: 50%; height: 150px; vertical-align: top }
#news ul li:nth-child(1) { background: #c6c; }
#news ul li:nth-child(2) { background: #000; }
#tv { width: 25%; height: 100%; display: block;  background: #c6c; float: right; }