How to build 2 columns of the same width using flex technology? In this case, the elements inside the columns should not be transferred to the next line.

.block__section { display: flex; justify-content: space-between; flex-wrap: nowrap; margin: 0; padding: 0; flex-direction: row; } .block_text__span { background: #29c5e5; color: #29c5e5; padding: 0 8px; margin-right: 6px; height: 10px; } .title_pattern { height: 14px; margin-top: 29px; } .block { flex: 1 0; width: 50%; } 
 <div class="block__section"> <div class="block"> <div class="block_text"> <ul class="block_text__ul"> <li class="block_text__li"><span class="block_text__span">. </span> About WhiteSquare </li> </ul> </div> <img src="img/Title pattern.png" class="title_pattern" alt=""> </div> <div class="block"> <div class="block_text"> <ul class="block_text__ul"> <li class="block_text__li"><span class="block_text__span">. </span> a word from OUR ceo </li> </ul> </div> <img src="img/Title pattern.png" class="title_pattern" alt=""> </div> </div>

2 answers 2

 * { margin: 0; padding: 0; } .items { display: flex; justify-content: space-between; text-align: center; width: 60%; height: 80vh; margin: auto; } .item { width: 50%; } .item:nth-of-type(1) {} .item:nth-of-type(2) { border-left: 1px solid #000; } 
 <div class="items"> <div class="item"> первая колонка </div> <div class="item"> вторая колонка </div> </div>

    Example

     .flex-parent { display: flex; } .flex-child { background: #ccc; text-align: center; padding: 15px; box-sizing: border-box; width: 50%; white-space: nowrap; display: flex; flex-wrap: nowrap; } .flex-child:nth-of-type(2) { background: #ddd; } 
     <div class="flex-parent"> <div class="flex-child"> <div class="elem">elem</div> <div class="elem">elem</div> </div> <div class="flex-child"> <div class="elem">elem 2</div> <div class="elem">elem 2</div> </div> </div>