The main problem was this: div {
display: flex;
} It's the one making things a row. If that part is removed, the section will look like the "No Changes" part, while the "Vantagens" example is how I styled it to look with a few minor changes: I personally try to avoid mixing different display options like flex, block inline-block and so on, and usually only use display:grid for the general sheet layout and then use display:flex for each individual section/box. Here your trouble was caused by having flex in some places, and then parts of the per-defined columns / rows CSS(2colrow, col) making sections display as block, so you had multiple places interfering. My version of the code: <div class='sheet-config'> <div class="2colrow"> <div class="col vantagens"> <label>Vantagens</label> <fieldset class="repeating_vantagens"> <label>Nome</label><input type="text" name='attr_vantagem'> <label>Custo</label><input type="number" name='attr_custo'> <button type='roll' name='roll_AtaqueD' value='&{template:default} {{name=@{vantagem}}}{{@{desc_vant}}}'></button> <br> <label>Descrição</label><textarea style="resize:none" name='attr_desc_vant'></textarea> </fieldset> </div> <div class="col"> <label>No Changes</label> <fieldset class="repeating_vantagens2"> <label>Nome</label> <input type="text" name='attr_vantagem'> <br> <label>Custo</label> <input type="number" name='attr_custo'> <br> <label>Descrição</label> <textarea style="resize:none" name='attr_desc_vant'></textarea> <button type='roll' name='roll_AtaqueD' value='&{template:default} {{name=@{vantagem}}}{{@{desc_vant}}}'></button> <hr> </fieldset> </div> </div> .charsheet { background-color: #ddd; min-width: 800px; } .charsheet label { display: inline-block; width: 75px; text-align: right; } .charsheet input { display: inline-block; width: 165px; } .charsheet input.sheet-short { width: 3.5em; } .charsheet table td, .charsheet table th { font-size: 1.2em; font-weight: bold; text-align: center; } select.sheet-dtype { width: 60px; vertical-align: top; } textarea { resize: vertical; overflow: auto; } /* div { display: flex; } .sheet-personagem, .sheet-config, .sheet-pericias { display: none; }*/ /* show the selected tab */ .sheet-tabstoggle[value="personagem"] ~ div.sheet-personagem, .sheet-tabstoggle[value="configuration"] ~ div.sheet-config, .sheet-tabstoggle[value="pericias"] ~ div.sheet-pericias { display: block; } div.sheet-vantagens .repcontainer label{ width: 45px; }
