Как исправить пользовательский интерфейс, не вводя новый пустой div?

Question

Ниже приведен код, в котором я управляю div, используя Flexbox.Для соответствия пользовательскому интерфейсу я поместил пустой фиктивный элемент div, чтобы элементы второй строки правильно совпали с указанным выше.

• Box11 имеет ту же ширину, что и Box 01
• Box12 имеет ту же ширину, что и Box 02
• Но Box 13 принимает ширину = Box 03 + Box 04
• Элементы внутри Box13 должны быть выровнены по правому краю.

Дайте мне знать, могу ли я достичь этого, не вводя фиктивный div, или есть какой-то более чистый или лучший подход к этому?

Код -

.container { padding: 20px 0;}

.wrong { border: 5px solid red;}
.correct { border: 5px solid green;}

.row { display: flex; padding: 0 1%; margin-bottom: 10px; }

.box { flex: 1; margin: 0 1%; border: 1px solid teal;}

.button-box { display: flex; flex-direction: row-reverse;}

<p>WRONG UI</p>
<div class="container wrong">
  <div class="row">
    <div class="box first">This is a test Box 01</div>
    <div class="box second">This is a test Box 02</div>
    <div class="box third">This is a test Box 03</div>
    <div class="box forth">This is a test Box 04</div>
  </div>
  <div class="row">
    <div class="box first">This is a test Box 11</div>
    <div class="box second">This is a test Box 12</div>
    <div class="box third button-box">
      Box 13
      <button>Button 1</button>
    </div>
  </div>
</div>

<p>CORRECT UI - bcoz of additional div</p>

<div class="container correct">
  <div class="row">
    <div class="box first">This is a test Box 01</div>
    <div class="box second">This is a test Box 02</div>
    <div class="box third">This is a test Box 03</div>
    <div class="box forth">This is a test Box 04</div>
  </div>
  <div class="row">
    <div class="box first">This is a test Box 11</div>
    <div class="box second">This is a test Box 12</div>
    <div class="box second"></div>
    <div class="box third button-box">
      Box 13
      <button>Button 1</button>
    </div>
  </div>
</div>

Answer 1

попробуйте добавить flex: 2; в поле 13. Это сделает его таким же большим, как поле 3 и 4

Answer 2

Удалите ненужные div и измените следующее свойство css

.button-box { display: flex; flex-direction: row-reverse;flex: 2}

.container { padding: 20px 0;}

.correct { border: 5px solid green;}

.row { display: flex; padding: 0 1%; margin-bottom: 10px; }

.box { flex: 1; margin: 0 1%; border: 1px solid teal;}

.button-box { display: flex; flex-direction: row-reverse;flex: 2}

<div class="container correct">
  <div class="row">
    <div class="box first">This is a test Box 01</div>
    <div class="box second">This is a test Box 02</div>
    <div class="box third">This is a test Box 03</div>
    <div class="box forth">This is a test Box 04</div>
  </div>
  <div class="row">
    <div class="box first">This is a test Box 11</div>
    <div class="box second">This is a test Box 12</div>
    <div class="box third button-box">
      Box 13
      <button>Button 1</button>
    </div>
  </div>
</div>