JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<a href="#"><div class="cont"><img src="https://www.kisbridgingloans.co.uk/guide-to-fraud-prevention/types-of-investment-scams/share.png"><h3>This is some text</h3></div></a>



<div class="row">
<a href="#"><div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a>
<a href="#"><div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div></a>
</div>

CSS

img {width:300px;height:150px;display:block;}

.cont {background-color:#ccc;}



.row {
  display: flex; /* equal height of the children */
}
.row a {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}