CSS для выравнивания столбца по правому краю на основе самого широкого элемента

В конце концов, я нашел решение. Поскольку мое исходное решение уже включено в вопрос, я отредактирую этот ответ на новый.

Вот рабочая скрипка: https://jsfiddle.net/Kretiss/mbt68qw2/

Во-первых, это HTML. Добавьте класс editWidth в абзацы, которые можно редактировать.

<div class="container">

    <div class="column">
      <div class="columnChild">
        <img src="smile.jpg">
        <p class="">Some text</p>
      </div>
      <div class="columnChild">
        <img src="smile.jpg">
        <p>Some text that wraps because its long long long</p>
      </div>
      <div class="columnChild">
        <img src="smile.jpg">
        <p>Some text</p>
      </div>
    </div>

    <div class="column">
        <div class="columnChild">
          <img src="smile.jpg">
          <p>Some longerrrrr text</p>
        </div>
        <div class="columnChild">
          <img src="smile.jpg">
          <p>Some text</p>
        </div>
        <div class="columnChild">
          <img src="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;
}

А вот и волшебство. Включите JQuery в файл, например, с помощью этого сценария <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>, а затем добавьте этот сценарий:

<script>
$(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);
  });

});

</script>

Все начинается с changeWidth(false); после загрузки DOM. Он вызывает функцию changeWidth(resizing) с аргументом false, потому что окна браузера не меняют размер. Эта функция перебирает все параграфы, в которых содержится класс editWidth. Внутри функции .each() вызывается функция $.fn.textWidth, которая возвращает точную ширину текста внутри абзацев. После этого строка $(this).css("width", currentWidth + 2); устанавливает ширину абзаца равной ширине текста + 2 пикселя (при желании можно изменить).

И когда пользователь изменяет размер браузера,

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

вызывается и делает то же, что описано выше. Единственное отличие состоит в том, что сначала устанавливается автоматическая ширина абзаца, иначе ширина текста может отличаться от реальной.

Функция, которая возвращает точную ширину текста, взята из этого сообщения: Расчет ширины текста