Создание расширенного макета - Flexbox или Table

Question

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

После того, как я придумал два решения, я начал задумываться, что является лучшим решением для создания такого макета.

Вы бы использовали гибкий дисплей или настольный дисплей?Вы рассматриваете возможность использования начальной загрузки или нет?Что следует учитывать при выборе одного над другим в этом случае?Также принимаются во внимание устройства с меньшим разрешением, например, 800 пикселей или меньше.

Вот мои реализации:

Реализация Flex:

<div class="container p-0">
        <div class="d-flex flex-row bd-highlight">
          <div class="flex-grow-1 bd-highlight">
            <div class="mt-3 ml-3">
                #C0000028524
            </div>
          </div>
          <div class="flex-grow-10 bd-highlight d-flex long-title-container">
            <div class="mt-3 long-title">
                <p class="long-title mb-0 fs-5">
                    Context menu shows wrong language
                </p>
            </div>
          </div>
          <div class="flex-grow-1 bd-highlight text-secondary">last updated</div>
        </div>
        <div class="d-flex flex-row bd-highlight">
          <div class="flex-grow-1 bd-highlight mlm-1">
            <img src="open.png" />
          </div>
          <div class="flex-grow-10 bd-highlight d-flex long-title-container"><p class="long-title">Context menu shows wrong language</p></div>
          <div class="flex-grow-1 bd-highlight text-secondary">last updated</div>
        </div>      
    </div>

Ссылка на реализацию flex: https://jsfiddle.net/7d512swt/

А вот моя реализация таблицы:

<div class="table-responsive">
  <table class="table">
  <tbody>
    <tr>
      <th scope="row">          
        <div class="mt-3 ml-3">
                #C0000028524
        </div>
      </th>
      <td>              
        <p class="long-title mb-0 fs-5">
            Context menu shows wrong language
        </p>
    </td>
      <td>last updated</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td><img src="open.png" /></td>
      <td><p class="long-title">Context menu shows wrong language</p></td>
      <td>last updated</td>
    </tr>

  </tbody>
 </table>
</div>

Ссылка на реализацию таблицы: https://jsfiddle.net/auv08hdq/