JSFiddle - React, Tailwind, and code Playground

by Kretiss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">

    <div class="column">
      <div class="columnChild">
        <img src="https://kissablezebralipsandotherthings.files.wordpress.com/2015/02/smile.jpg">
        <p class="">Some text</p>
      </div>
      <div class="columnChild">
        <img src="https://kissablezebralipsandotherthings.files.wordpress.com/2015/02/smile.jpg">
        <p>Some text that wraps because its long long long</p>
      </div>
      <div class="columnChild">
        <img src="https://kissablezebralipsandotherthings.files.wordpress.com/2015/02/smile.jpg">
        <p>Some text</p>
      </div>
    </div>

    <div class="column">
        <div class="columnChild">
          <img src="https://kissablezebralipsandotherthings.files.wordpress.com/2015/02/smile.jpg">
          <p>Some longerrrrr text</p>
        </div>
        <div class="columnChild">
          <img src="https://kissablezebralipsandotherthings.files.wordpress.com/2015/02/smile.jpg">
          <p>Some text</p>
        </div>
        <div class="columnChild">
          <img src="https://kissablezebralipsandotherthings.files.wordpress.com/2015/02/smile.jpg">
          <p class="editWidth">Some text that wraps because its long sad Some text that wraps because its long</p>
        </div>
    </div>

  </div>

CSS

*{
  box-sizing: border-box;
}

.container{
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border: 2px solid black;
}

.column{
  width: fit-content;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  border: 1px solid red;
}

.columnChild{
  display: flex;
  justify-content:flex-start;
  align-items: center;
}

.columnChild img{
  height: 50px;
}

JavaScript

$(document).ready(function(){

  $.fn.textWidth = function(){
    const html_org = $(this).html();
    const html_calc = '<span>' + html_org + '</span>';
    $(this).html(html_calc);
    const width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
  };

  function changeWidth(resizing){
    const elements = $(".editWidth");

    elements.each(function(index){
      if(resizing) $(this).css("width", "auto");

      const currentWidth = $(this).textWidth();
      $(this).css("width", currentWidth + 2);

    });

  }

  changeWidth(false);

  $(window).resize(function(){
    changeWidth(true);
  });

});