Repeating sections on same row pushing each down when add button is used

I've recently joined a campaign that uses a custom sheet written ages ago. No one in the group knows how to write HTML/CSS so I've started tinkering around with it to try and get it in a better state. One issue I've been banging my head on for a while has to do with how two repeating sections on the same row interact when adding additional elements to them. Whichever one has less rows is brought to the bottom of the screen which looks awful. Could someone help me determine what is causing this? I've been messing around with the positioning and display for them but haven't found a way to make their position stay static when the other one has elements added to it. Relevant HTML: <!-- Weapons --> <div class = "sheet-weapons"> <div class = "sheet-header">WEAPONS</div> <tr> <th>Weapon Slot</th> </tr> <tr> <td><input type = "number" name = "attr_WSlot" value = "1" min = "1"/></td> </tr> <fieldset class = "repeating_weapons"> <table> <tr> <th>Weapon Name</th> <th>Type</th> <th>Uses</th> </tr> <tr class = "sheet-thicc"> <td><input name = "attr_WName" type = "text"></td> <td><input name = "attr_WType" type = "text"> </td> <td><input type = "number" name = "attr_Uses" value = "1" min = "0"/></td> </tr> </table> <input type="checkbox" class="sheet-toggle-stats"> <span class = "sheet-toggle-label">Attributes</span> <table class = "sheet-hiddenstats"> <tr> <th>Weight</th> <th>Might</th> <th>Hit</th> <th>Crit</th> <th>Strong against:</th> </tr> <tr> <td><input type = "number" name = "attr_Wt" value = "0"/></td> <td><input type = "number" name = "attr_Mt" value = "0"/></td> <td><input type = "number" name = "attr_Hit" value = "0"/></td> <td><input type = "number" name = "attr_Crit" value = "0"/></td> <td> <select class="sheet-strengths" name="attr_Strengths"> <option> </option> <option>Beast</option> <option>Flier</option> <option>Dragon</option> <option>Armor</option> <option>Monster</option> <option>Beast, Flier</option> <option>Beast, Armor</option> <option>Beast, Dragon</option> <option>Beast, Monster</option> <option>Dragon, Flier</option> <option>Dragon, Armor</option> <option>Dragon, Monster</option> <option>Monster, Flier</option> <option>Monster, Armor</option> <option>Armor, Flier</option> </select> </td> </tr> <tr> <th>HP</th> <th>Str</th> <th>Mag</th> <th>Skl</th> </tr> <tr> <td><input name = "attr_HP_wp" type = "number" value = "0"></td> <td><input name = "attr_Str_wp" type = "number" value = "0"></td> <td><input name = "attr_Mag_wp" type = "number" value = "0"></td> <td><input name = "attr_Skl_wp" type = "number" value = "0"></td> </tr> <tr> <th>Spd</th> <th>Lck</th> <th>Def</th> <th>Res</th> <th>Cha</th> </tr> <tr> <td><input name = "attr_Spd_wp" type = "number" value = "0"></td> <td><input name = "attr_Lck_wp" type = "number" value = "0"></td> <td><input name = "attr_Def_wp" type = "number" value = "0"></td> <td><input name = "attr_Res_wp" type = "number" value = "0"></td> <td><input name = "attr_Cha_wp" type = "number" value = "0"></td> </tr> </table> <div class = "sheet-hiddenskill"> <label style = "font-size: 13px; font-weight: bold"> Weapon Description <input name = "attr_Skill_wp" type = "text"></input> </label> <label style = "font-size: 13px; font-weight: bold"> Effective Damage <input name = "attr_Eff_wp" type = "text"></input> </label> </div> </fieldset> </div> <!-- Spells --> <div class = "sheet-spells"> <div class = "sheet-header">SPELLS</div> <tr> <th>Spell Slot</th> </tr> <tr> <td><input type = "number" name = "attr_SSlot" value = "1" min = "1"/></td> </tr> <fieldset class = "repeating_spells"> <table> <tr> <th>Spell Name</th> <th>Type</th> <th>Uses</th> </tr> <tr class = "sheet-thicc"> <td><input name = "attr_SName" type = "text"></td> <td><input name = "attr_SType" type = "text"></td> <td><input type = "number" name = "attr_Uses" value = "1" min = "0"/></td> </tr> </table> <input type="checkbox" class="sheet-toggle-stats"> <span class = "sheet-toggle-label">Attributes</span> <table class = "sheet-hiddenstats"> <tr> <th>Weight</th> <th>Might</th> <th>Hit</th> </tr> <tr> <td><input type = "number" name = "attr_Wt" value = "0"/></td> <td><input type = "number" name = "attr_Mt" value = "0"/></td> <td><input type = "number" name = "attr_Hit" value = "0"/></td> <td><input type = "number" name = "attr_Crit" value = "0"/></td> <td> <select class="sheet-strengths" name="attr_Strengths"> <option> </option> <option>Beast</option> <option>Flier</option> <option>Dragon</option> <option>Armor</option> <option>Monster</option> <option>Beast, Flier</option> <option>Beast, Armor</option> <option>Beast, Dragon</option> <option>Beast, Monster</option> <option>Dragon, Flier</option> <option>Dragon, Armor</option> <option>Dragon, Monster</option> <option>Monster, Flier</option> <option>Monster, Armor</option> <option>Armor, Flier</option> </select> </td> </tr> <tr> <th>HP</th> <th>Str</th> <th>Mag</th> <th>Skl</th> </tr> <tr> <td><input name = "attr_HP_wp" type = "number" value = "0"></td> <td><input name = "attr_Str_wp" type = "number" value = "0"></td> <td><input name = "attr_Mag_wp" type = "number" value = "0"></td> <td><input name = "attr_Skl_wp" type = "number" value = "0"></td> </tr> <tr> <th>Spd</th> <th>Lck</th> <th>Def</th> <th>Res</th> </tr> <tr> <td><input name = "attr_Spd_wp" type = "number" value = "0"></td> <td><input name = "attr_Lck_wp" type = "number" value = "0"></td> <td><input name = "attr_Def_wp" type = "number" value = "0"></td> <td><input name = "attr_Res_wp" type = "number" value = "0"></td> <td><input name = "attr_Cha_wp" type = "number" value = "0"></td> </tr> </table> <div class = "sheet-hiddenskill"> <label style = "font-size: 13px; font-weight: bold"> Weapon Description <input name = "attr_Skill_wp" type = "text"></input> </label> <label style = "font-size: 13px; font-weight: bold"> Effect <input name = "attr_Eff_wp" type = "text"></input> </label> </div> </fieldset> </div> Relevant CSS: .charsheet .sheet-weapons, .charsheet .sheet-combat, .charsheet .sheet-spells,.charsheet .sheet-skills,.charsheet .sheet-inventory { clear:none; overflow:hidden; position:static; padding-left: 5px; padding-right: 5px; overflow-x:hidden; } .charsheet .sheet-weapons select { width:40%; } .charsheet .sheet-wepprof,.charsheet .sheet-weapons,.charsheet .sheet-spells,.charsheet .sheet-inventory,.charsheet .sheet-skills { width: 45%; background-color:#f3f3f3; padding-left:5px; display: inline-block; } .charsheet .sheet-weapons input[type="text"] { width:100% } .charsheet .sheet-weapons td select{ width:100%; } .charsheet .sheet-spells input[type="text"] { width:100% } .charsheet .sheet-spells td select { width:100%; } .charsheet .sheet-weapons .sheet-header,.charsheet .sheet-inventory .sheet-header { border-right:none; } .charsheet .repitem:not(:first-child) { margin-top:2vh; border-top:2px #353535 solid; padding-top:5px; }

The problem seems to be that the weapons div and the spells div are next to each other, and there is no way make the spells div "float" upwards to the top. The problem I think narrows down to this section: .charsheet .sheet-weapons, .charsheet .sheet-combat, .charsheet .sheet-spells,.charsheet .sheet-skills,.charsheet .sheet-inventory { clear:none; overflow:hidden; position:static; padding-left: 5px; padding-right: 5px; overflow-x:hidden; } I think a lot all of this is unneccessary (though its hard to say for certain without seeing the rest of the sheet code), and the lack of linebreaks on the first line makes it less readable. I think I'd rewrite is as .charsheet .sheet-weapons, .charsheet .sheet-combat, .charsheet .sheet-spells, .charsheet .sheet-skills, .charsheet .sheet-inventory { padding-left: 5px; padding-right: 5px; vertical-align: top; } The last line aligns them with each other. That said, the sheet is using <table> for alignment, and the above code seems to be part of another, larger, table. Tables can be a nightmare - they look simple for beginning sheet authors, but they are aren't designed for layout and can create problems. But give this a try and see what happens.

Yeah, that got it working. Thanks! I agree, using tables is all kinds of awful, especially for a sheet that's been being revised for nearly a decade by people who don't know HTML or CSS (including me) It would definitely look better and be easier to work with if I updated everything to use grid or flexbox but there's so much going on with it that I don't want to try to take it all apart and put it back together properly.

Yeah, once you have a sheet that is working in its current form, and know how much work it will take to fix something, it's easier just to make the best of it.