JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header container">
    <div class="col-1">COL 1</div>
    <div class="col-3">
        COL 3 asf asdfa dfas dfsdfasf asdf asdfasdfs
        asdfasdf asf asdf asdfasdf asdfasd fasd fasdfas dfsdfasdf
        asdfasdfsdf fasdf asdf asdf asd asdfas fd
        asdfasdfsdf fasdf asdf asdf asd asdfas fd
        asdfasdfsdf fasdf asdf asdf asd asdfas fd
        asdfasdfsdf fasdf asdf asdf asd asdfas fd
        asdfasdfsdf fasdf asdf asdf asd asdfas fd
        asdfasdfsdf fasdf asdf asdf asd asdfas fd
        asdfasdfsdf fasdf asdf asdf asd asdfas fd
        asdfasdfsdf fasdf asdf asdf asd asdfas fd
        asdfasdfsdf fasdf asdf asdf asd asdfas fd
        asdfasdfsdf fasdf asdf asdf asd asdfas fd
    </div>
</div>

CSS

.header {
	    display: table;
	    width: 100%;
	}
	.header > div {
	    display: table-cell;
	}
    .header > div:first-child:after {
        display: table-cell;
        width: 10px;
        content: "a";
        background: #0f0;
    }
    .col-1 {
        width: 50%;
        padding: 5px;
        border-right: 2px solid #f00;
        border-left: 2px solid #f00;
    }
	.col-2 {
	    width:2px;
	}
	.col-3 {
	    padding: 5px;
	    border-right: 2px solid #f00;
        border-left: 2px solid #f00;
	}