Help keeping a block together

I am making an NPC sheet and have created a repeating section for abilities, with a hidden section. With only the ability named as a button when the section is hidden, the buttons display in a two column format the prolem is whenyou show the hidded section this also wraps round into both columns. I am not that experienced with css, an dhaven't managed to find any way to keep the expanded section together in one column. My HTML  <div class="sheet-npcAbil-Grid"> <!-- sheet-npcAbil-Grid-->  <h3 style="column-span:2;">Abilities/Attacks</h3>     <div class="sheet-npcMoves-container"> <!-- sheet-npcMoves-container-->      <fieldset class="repeating_npcAbilities" >         <button type=roll value="/emas @{character_name} @{npcEmote}\n @{npcDamage}" name=abilRoll style="width:12em;"><span name="attr_npcAbName" class="sheet_npcAbBtnTxt"></span></button></span> <input name="attr_is_HidenpcAbility" class="sheet-npcAbility" type="checkbox" checked="checked">         <span class="sheet-is-HidenpcAbility" >             <span style='font-family:pictos;' ></span>         </span> <div class="sheet-npcAbilityConfig"> <!-- sheet-npcAbilityConfig -->     <div>Ability Name:</div><div><input type=text name=attr_npcAbName placeholder="Ability Name" style="width:14em;"></div>             <div>Emote message:</div><div><input type=text name=attr_npcEmote placeholder="Text to Emote" style="width:14em;"/></div>             <div>Dmage/Skill roll:</div><div><textarea class=npcTA name=attr_npcDamage  placeholder="skill or damage with inline roll"></textarea></div>             <div>Description:</div><div><textarea class=npcTA  name=attr_npcAbNote placeholder="description of effect"></textarea></div>             <p>Leave any area blank to be excluded from output.</p> </div> <!-- sheet-npcAbilityConfig -->     </fieldset>     </div> <!-- sheet-npcMoves-container--> </div> <!-- sheet-npcAbil-Grid--> my CSS (for the relevant sections) .sheet-npcAbil-Grid { grid-area:Abilities; display:block; font-size: 11px; display:block; padding: 5px; color: #000000; background-color: transparent; border-style:groove; align-items:top; } .sheet-npcMoves-container { column-count:2; } .sheet-npcAbilityConfig{ row-wrap:none; border:2px; border-color:black; border-radius:5px; border:solid; padding:1em; width:80%; } Most of the borders are just to let me see what is happend whilst designing. I have tried varios combinations of <span> and <div> tags and (dont shoot me) <table> none of which had any effect. does anyone know what i can do to keep this block from wrapping over the two columns?

This is a little annoying thing with CSS multi column. You need to use break-inside: avoid . However, your css needs some adjustment overall as well. The column setup needs be applied to the repeating section container itself. I'd recommend using column-width  instead of column-count  so that your section is responsive to the width of the character sheet. Add break-inside  to the repitems Those changes would look like this: .sheet-npcAbil-Grid { grid-area:Abilities; display:block; font-size: 11px; display:block; padding: 5px; color: #000000; background-color: transparent; border-style:groove; align-items:top; } /* Column changes start here */ .sheet-npcAbil-Grid .repcontainer{ column-width: 100px; column-gap: 1em; } .sheet-npcAbil-Grid .repitem{ break-inside: avoid; } /* column changes end here */ .sheet-npcAbilityConfig{ row-wrap:none; border:2px; border-color:black; border-radius:5px; border:solid; padding:1em; width:80%; }

Thank you for the prompt response all working now.