Custom Character Sheet Repeating Section Buttons Interfering With Layout.

I have a repeating section I'm using on a new sheet (html and css below). I'm having some trouble getting the headings to align with the fields. Before adding an entry the headings line up with where I'm expecting the fields to appear. However, when I add a row it appears inline with the buttons for '+Add' and 'Modify', causing the fields to get pushed out of position and overlap with each other. Is there something I'm missing or a better way to do this? Any help would be greatly appreciated, Html <div class="sheet-littleheader">Wounds</div> <div class="attributecolflex"> <div class="rowflex"> <div class="sheet-tinyheader grow6">Event</div> <div class="sheet-tinyheader grow1">Damage</div> <div class="sheet-tinyheader grow1">Major?</div> <div class="sheet-tinyheader grow1">Chirurgery?</div> </div> <div class="rowflex"> <fieldset class="repeating_skills"> <div class="sheet-grid-container"> <input class="text" type="text" name="attr_wound_at" placeholder="Event injured at..."></input> <input type="number" name="attr_wound_damage"></input> <input type="checkbox" name="attr_major_wound"> <input type="checkbox" name="attr_chirurgery_needed"> </div> </fieldset> </div> </div> CSS .charsheet div.sheet-littleheader { padding-top: 5px; padding-bottom: 5px; font-family:'Aclonica','Manga-Temple-Regular','Kaushan Script', Arial; font-size:20px; flex-basis: auto; flex-grow: 1; } .charsheet .attributecolflex { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-evenly; align-items: stretch } .charsheet .rowflex { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } .sheet-grid-container{     display:grid;     grid-template-columns: 50% 30% 10% 10%; } .charsheet .grow1{ flex-grow: 1; } .charsheet .grow6{ flex-grow: 6; }

This is because you have the div that contains the repeating section set to display:flex. There are several ways to fix this, although none of them are going to be exactly easy. You can set the rep_control to be width:100%. Note that this is really just a stop gap as the div for each .repitem and the .repcontainer will also need to be set to this, and will likely need to have display:flex added to it as well Use CSS grid Benefit is that you won't need to adjust the repitem display properties, but you'll still need to replicate the alignment css for the repitems. EDIT: It looks like you already have the repitems using grid. I'd really recommend just using grid for the whole thing. Flexbox is useful when you only care about alignment in one direction, but is nearly useless if you need 2d alignment. Grid is designed for 2d alignment but overkill for 1d alignment.

I've had a play around with what you've suggested and I'm maybe a bit closer. This is the closest I've managed to get, the fields are no longer overlapping which is good, but the control buttons are still appearing inline with the first entry throwing things out. If the buttons could wrap under then I think it's there. <div class="sheet-littleheader">Wounds</div> <div class="sheet-grid-container"> <div class="sheet-tinyheader">Event</div> <div class="sheet-tinyheader">Damage</div> <div class="sheet-tinyheader">Major?</div> <div class="sheet-tinyheader">Chirurgery?</div> <fieldset class="repeating_skills"> <input class="text" type="text" name="attr_wound_at" placeholder="Event injured at..."></input> <input type="number" name="attr_wound_damage"></input> <input type="checkbox" name="attr_major_wound"> <input type="checkbox" name="attr_chirurgery_needed"> </fieldset> </div> .sheet-grid-container{     display: inline-grid;     grid-template-columns: 5fr 3fr 1fr 1fr; }

You should probably have your grid-container repeated inside the fieldset.  Then everything inside the fieldset will be using the same css spacing as your headers.  The way you have it now, you are putting the entire fieldset repeating section in your first css defined column. <div class="sheet-grid-container"> <div class="sheet-tinyheader">Event</div> <div class="sheet-tinyheader">Damage</div> <div class="sheet-tinyheader">Major?</div> <div class="sheet-tinyheader">Chirurgery?</div> </div> <fieldset class="repeating_skills"> <div class="sheet-grid-container"> <input class="text" type="text" name="attr_wound_at" placeholder="Event injured at..."></input> <input type="number" name="attr_wound_damage"></input> <input type="checkbox" name="attr_major_wound"> <input type="checkbox" name="attr_chirurgery_needed"> </div> </fieldset>

That makes sense, applying that change (plus adding in one entry outside the repeat to see how it should land) looks like this; <div class="sheet-littleheader">Wounds</div> <div class="sheet-grid-container"> <div class="sheet-tinyheader">Event</div> <div class="sheet-tinyheader">Damage</div> <div class="sheet-tinyheader">Major?</div> <div class="sheet-tinyheader">Chirurgery?</div> <input type="text" name="attr_wound_at" placeholder="Event injured at..."></input> <input type="number" name="attr_wound_damage"></input> <input type="checkbox" name="attr_major_wound"> <input type="checkbox" name="attr_chirurgery_needed"> </div> <div class="sheet-grid-container"> <fieldset class="repeating_skills"> <input type="text" name="attr_wound_at" placeholder="Event injured at..."></input>              <input type="number" name="attr_wound_damage"></input> <input type="checkbox" name="attr_major_wound"> <input type="checkbox" name="attr_chirurgery_needed"> </fieldset> </div>

Spotted my mistake have it sorted now, Thanks for all your help