JSFiddle - React, Tailwind, and code Playground

HTML

<div id="obal">
    <div id="prvni">
	    <div class="inner">Prvni cast text neni sice nejsilnejsi, ale spisovatel se snazi popsat dulezite body jeho navstevy
        </div>
	</div>
	<div id="cara">
	    <div class="inner"></div>
	</div>
	<div id="druhy">
        <div class="inner">Druha cast mluvila hlavne o velkych problemech na startu, kdy se vsichni ucastnici nestihnuli pripravit a pote nasledovat zmatek. Jenze kazdy chtel vyhrat, tak to nevzdal <br/> NIKDY :-)
        </div>
	</div>
</div>

CSS

#obal {
	margin: 10px;
    display: flex;
}

#prvni, #druhy {
    display: table;
}

#cara {
    position: relative; right: 20px;
}	
#cara .inner {
    position: absolute;
	width: 10px; height: 100%;
	background: #336;
}

#prvni .inner,  #druhy .inner{		
    padding: 10px;
}

#prvni {
	margin: 0px 30px;
	width: 120px;
	background: #ff3322;
	font-size: 0.95rem;
	overflow: hidden;
}		

#druhy {
	width: 120px;
	background: #393;
	font-size: 1rem;
	overflow: hidden;
}