HTML-содержимое в ячейке таблицы из макета таблицы имеет разные отступы и поля при изменении содержимого из другой ячейки

Question

У меня фиксированный table-layout div родитель с двумя горизонтальными table-cell дочерними элементами.

В левой ячейке я просто вставил текст.Однако, когда правая ячейка имеет высокое изображение, текст в левой ячейке заостряется вниз, независимо от того, какие HTML-отступы и стили полей я вставил. Когда в правой ячейке есть многострочный текст, текст слеваячейка расположена сверху.

Я хочу, чтобы текст из левой ячейки всегда оставался сверху.Куда я скучаю?

html

<div class="row-post">
  <div class="col-cell col-fixed" style="margin-top: 0px;padding-top: 0px;">
    <p>1</p>
  </div>
  <div class="col-cell pl-3">
    <img src="https://i.kym-cdn.com/photos/images/facebook/001/295/524/cda.jpg" style="height:300px">
  </div>
</div>

<hr>

<div class="row-post">
  <div class="col-cell col-fixed">
    <p>1</p>
  </div>
  <div class="col-cell pl-3">
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  </div>
</div>

css

.row-post {
  table-layout: fixed;
  width: 100%;
  word-break: break-all;
}
.row-post .col-cell {
  display:table-cell;
}

.row-post .col-cell img {
  max-width: 100%;
}

.col-fixed {
  width: 26px;
}

js fiddle, если выхочу поиграть

https://jsfiddle.net/f1zr6o93/

js Fiddle Snip

Answer 1

Для типов отображения таблицы вы можете использовать:

vertical-align: top;

в любой «ячейке таблицы».

Отредактированная скрипка

Для справкиесть более полное объяснение , когда вертикальное выравнивание применяется в этой другой статье SO .