JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="tl">
		<div class="texte">
			bla bla bla<br>
			bla bla bla<br>
			bla bla bla<br>
			bla bla bla<br>
		</div>

		<div class="image">
			<img src="http://3.bp.blogspot.com/-yfqac4oCwsc/Voa_t4UvgwI/AAAAAAAAAYY/9KYt4h09V0Y/s1600/chaton+banc+roux+mimi.jpg">
		</div>
	</div>
<div class="tl">
		<div class="texte">
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
			blu blu blu blu<br>
		</div>

		<div class="image">
			<img src="http://3.bp.blogspot.com/-yfqac4oCwsc/Voa_t4UvgwI/AAAAAAAAAYY/9KYt4h09V0Y/s1600/chaton+banc+roux+mimi.jpg">
		</div>
	</div>

CSS

.tl {
  display: flex;
}
  .texte {
    flex: 1 1;
    width:50%;
  }
  .image {
    position: relative;
    flex: 1 1;
    width:50%;
  }
  img {
    position: absolute;
    top:0;
    left:0;
    height:100%;
  }

JavaScript

$(".tl > .image").css({'height' [decu]$(".tl > texte").height()+'px')});