Creating dynamic blocks: when one is hidden, does the second fill the entire width?

Question

css

Good time everyone.
There is such an idea - I want to implement a dynamic grid on bootstrap.
Example:

<div class="col-sm-12">
        <div class="col-sm-6">Первый</div>
        <div class="col-sm-6">Второй</div>
</div>

The bottom line is that I want the block to disappear when the close event occurs, and its area is occupied by the neighboring one (that is, it was before hiding col-sm-6, and became col-sm-12 ).
I would be grateful for crutches or ready-made examples.
All the best and clean code)

Answer 1

that's what flex is for. either write it yourself, or take version 4 of bootstrap https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

Flex, but there is also an old-fashioned way - tabular layout, and this is not a crutch .
When adding

.cell.first {
  display: none;
}

we get what we expect.