w3css - Создание divs внутри столбцов divs имеет равную высоту

Question

В html5 игре, которую я делаю, я создал магазин обновлений. Я пытаюсь получить обновления в каждом столбце с одинаковой высотой, но они отображаются с разной высотой, если один из абзацев слишком длинный для одной строки. который делает строки в столбцах разных размеров.

here is an image of the result

Я хочу, чтобы быть того же размера, но ничего я пробовал работает. Вот фрагмент кода и jsfiddle.

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/> 
 
<div class="w3-row w3-border w3-border-black code-blocks-upgrades" style="display: flex; width: 1111px; margin: 0; padding: 0"> 
 
    <div class="w3-col l6 m6 s6" style="display: flex; flex-direction: column; flex: 1"> 
 
    <div class="w3-row w3-center w3-border-top w3-border-left w3-border-right w3-border-black w3-padding-small" style="display: flex; align-items: center; flex: 1"> 
 
     <div class="w3-col l5 m5 s5" style="display: table; height: 26px"> 
 
     <p id="buy-code-blocks-speed-label" class="w3-small" style="display: table-cell; vertical-align: middle">Buy Code Blocks Speed ($1000.00): </p> 
 
     </div> 
 
     <div class="w3-col l7 m7 s7 w3-left-align" style="display: flex; flex-direction: row"> 
 
     <button class="w3-btn w3-yellow w3-small w3-padding-small" onclick="">1</button> 
 
     <button class="w3-btn w3-orange w3-small w3-padding-small" onclick="">10</button> 
 
     <button class="w3-btn w3-red w3-small w3-padding-small" onclick="">100</button> 
 
     <button class="w3-btn w3-black w3-small w3-padding-small" onclick="">Max</button> 
 
     <input class="w3-small w3-border w3-border-black" style="height: 26px; width: 50px; flex: 1" type="text" placeholder="Custom" onkeypress=""> 
 
     </div> 
 
    </div> 
 
    <div class="w3-row w3-center w3-border w3-border-black w3-padding-small" style="display: flex; align-items: center; flex: 1"> 
 
     <div class="w3-col l5 m5 s5" style="display: table; height: 26px"> 
 
     <p id="buy-code-blocks-strength-label" class="w3-small" style="display: table-cell; vertical-align: middle">Buy Code Blocks Strength ($1000.00): </p> 
 
     </div> 
 
     <div class="w3-col l7 m7 s7 w3-left-align" style="display: flex; flex-direction: row"> 
 
     <button class="w3-btn w3-yellow w3-small w3-padding-small" onclick="">1</button> 
 
     <button class="w3-btn w3-orange w3-small w3-padding-small" onclick="">10</button> 
 
     <button class="w3-btn w3-red w3-small w3-padding-small" onclick="">100</button> 
 
     <button class="w3-btn w3-black w3-small w3-padding-small" onclick="">Max</button> 
 
     <input class="w3-small w3-border w3-border-black" style="height: 26px; width: 50px; flex: 1" type="text" placeholder="Custom" onkeypress=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="w3-col l6 m6 s6" style="display: flex; flex-direction: column; flex: 1"> 
 
    <div class="w3-row w3-center w3-border-top w3-border-right w3-border-black w3-padding-small" style="display: flex; align-items: center; flex: 1"> 
 
     <div class="w3-col l5 m5 s5" style="display: table; height: 26px"> 
 
     <p id="sell-code-blocks-speed-label" class="w3-small" style="display: table-cell; vertical-align: middle">Sell Code Blocks Speed ($100.00): </p> 
 
     </div> 
 
     <div class="w3-col l7 m7 s7 w3-left-align" style="display: flex; flex-direction: row"> 
 
     <button class="w3-btn w3-yellow w3-small w3-padding-small" onclick="">1</button> 
 
     <button class="w3-btn w3-orange w3-small w3-padding-small" onclick="">10</button> 
 
     <button class="w3-btn w3-red w3-small w3-padding-small" onclick="">100</button> 
 
     <button class="w3-btn w3-black w3-small w3-padding-small" onclick="">Max</button> 
 
     <input class="w3-small w3-border w3-border-black" style="height: 26px; width: 50px; flex: 1" type="text" placeholder="Custom" onkeypress=""> 
 
     </div> 
 
    </div> 
 
    <div class="w3-row w3-center w3-border-top w3-border-bottom w3-border-right w3-border-black w3-padding-small" style="display: flex; align-items: center; flex: 1"> 
 
     <div class="w3-col l5 m5 s5" style="display: table; height: 26px"> 
 
     <p id="sell-code-blocks-strength-label" class="w3-small" style="display: table-cell; vertical-align: middle">Sell Code Blocks Strength ($100.00): </p> 
 
     </div> 
 
     <div class="w3-col l7 m7 s7 w3-left-align" style="display: flex; flex-direction: row"> 
 
     <button class="w3-btn w3-yellow w3-small w3-padding-small" onclick="game.convert_amount(event, 1, 'code_blocks_strength');">1</button> 
 
     <button class="w3-btn w3-orange w3-small w3-padding-small" onclick="game.convert_amount(event, 10, 'code_blocks_strength');">10</button> 
 
     <button class="w3-btn w3-red w3-small w3-padding-small" onclick="game.convert_amount(event, 100, 'code_blocks_strength');">100</button> 
 
     <button class="w3-btn w3-black w3-small w3-padding-small" onclick="game.convert_amount(event, 'max', 'code_blocks_strength');">Max</button> 
 
     <input class="w3-small w3-border w3-border-black" style="height: 26px; width: 50px; flex: 1" type="text" placeholder="Custom" onkeypress=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Here is the JSFiddle

Любая помощь будет принята с благодарностью спасибо!

Answer 1

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