html: Как растянуть соседний блок параллельно основному?

Всем добрый день! Вопрос дилетантский, но мне не сообразить, прошу совета компетентных людей. У меня есть div блок с шириной в 100%, внутри него лежат два div с шириной по 50%, которые делят этот блок на два столбца. Вот когда второй столбец не заполнен никакими данными, он не выводится и тогда в разметке остается лишь div с шириной в 100%, а внутри него лежит один div в 50% и он прижат к левому краю, а справа пусто. Как бы сделать так, чтобы когда справа div не выводится, то этот единственный div менял значение с 50% на 100% ширины? Вот у меня есть две страницы на сайте, здесь прямо под надписью "Стоимость зависит от параметров изделия:" выводятся оба столбца по 50% и всё как бы нормально ( https://elloi.ru/rulonnye-shtory/rulonnaya-shtora-aris-02 ), а тут правый столбец не выводится, так как он пустой и левый занимает лишь половину div, хотя мне нужно, чтобы он становился во всю ширину ( https://elloi.ru/furnitura/shtornaya-lenta-aida-1 ). Помогите, пожалуйста, советом, я так понимаю, что придется разметку этих блоков переделать на какую-то более верную?

Пример 1

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.div {
  display: table;
  width: 100%;
  table-layout: fixed; /* таблица делится на колонки равной ширины, для корректной работы этого значения обязательно должна быть задана ширина таблицы. */
  margin-bottom: 15px;
}

.div-child {
  display: table-cell;
  vertical-align: top;
  padding: 25px;
  background: #ccc;
}

.div-child:nth-of-type(2) {
  background: #ddd;
}

  

    1
  
  

    2
  



  

    1
  



  

    2
  

Пример 2

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.div {
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
}

.div-child {
  flex-grow: 1;
  flex-basis: 0;
  padding: 25px;
  background: #ccc;
}

.div-child:nth-of-type(2) {
    background: #ddd;
}

  

    1
  
  

    2
  



  

    1
  



  

    2