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; display:table }
#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%; background: #c6c; display: inline-block; vertical-align:top; }