I ended up using a grid. html < div class = "abilities-container" > < fieldset class = "repeating_abilities" > < div class = "ability" > < input type = "text" name = "attr_abilitty_name" > < details class = "ability_desc" > < summary ></ summary > < textarea name = "attr_abilitty_description" placeholder = "Description" ></ textarea > < button type = "roll" name = "attr_ability_roll" value = "&{template:default}{{name=@{abilitty_name}}}{{@{abilitty_description}}}" > Display in chat </ button > </ details > </ div > </ fieldset > </ div > css /* container for the repeating abilities sectioin */ .charsheet .abilities-container { overflow-y : auto ; overflow-x : hidden ; grid-row : 4 ; } /* abilities repeating section row*/ .charsheet .ability { display : grid ; grid-template-columns : 1fr ; grid-template-rows : auto ; padding : 5px ; margin : 0 ; } /* abilities repeating section input*/ .charsheet .ability input { width : 100% ; } /* abilities repeating section input*/ .charsheet .ability .ability_desc { grid-row : 2 ; display : none ; } /* Show ability description on hover*/ .charsheet .ability:hover > .ability_desc { display : grid ; } /* Alters the appearance of the title of the ability details*/ .repcontainer [ data-groupname = "repeating_abilities" ] summary { outline : none ; display : block ; padding-top : 5px ; padding-left : 2.3rem ; position : relative ; cursor : pointer ; } /* Alters the appearance of the ability details*/ .repcontainer [ data-groupname = "repeating_abilities" ] details { box-sizing : border-box ; display : grid ; margin-right : 10px ; } .repcontainer [ data-groupname = "repeating_abilities" ] details summary::-webkit-details-marker { display : none ; } /* Animate the arrow before the ability details summary (rotate when opened)*/ .repcontainer [ data-groupname = "repeating_abilities" ] details [ open ] > summary:before { transform : rotate ( 90deg ); } /* If details are opened display this text*/ .repcontainer [ data-groupname = "repeating_abilities" ] details [ open ] > summary:after { content : 'Hide desctiption' ; } /* If details are closed display this text*/ .repcontainer [ data-groupname = "repeating_abilities" ] details > summary:after { content : 'Show description' ; } /* Animate the arrow before the ability details summary */ .repcontainer [ data-groupname = "repeating_abilities" ] summary:before { content : '' ; border-width : .4rem ; border-style : solid ; border-color : transparent transparent transparent black ; position : absolute ; left : 1rem ; transform : rotate ( 0 ); transform-origin : .2rem 50% ; transition : 0.20s transform ease ; margin-top : 5px ; } /* Style of each individual row of ability*/ .repcontainer [ data-groupname = "repeating_abilities" ] .repitem { border : 1px solid black ; margin : -1px 0px ; border-radius : 5px ; } I also added some features such as autohide description so it won't get long when the player adds many abilities, arrow animation, scroll overflow, and more. I think it works pretty well. on hover: expanded: I hope this is going to help someone in the future ^,=,^