[HELP] Flex Box and Repeating Section

So...not sure what I'm doing wrong, nor how to fix it...here's what's happening: not sure why the input box isn't aligned at the top with the text area.  Here's the HTML <div class="sheet-HeroicPath"> <input type="checkbox" class="sheet-hideHJ" name="attr_hideHJ" /><span class="sheet-showHJ"></span> <h1 class="sheet-sectionTitle" data-i18n="heros-journey">Hero's Journey</h1> <div class="sheet-HJ"> <h3 class="sheet-hjItem sheet-result" style="text-align: center;" data-i18n="result">Result</h3> <h3 class="sheet-hjItem sheet-event" data-i18n="table-event">Table/Event</h3> <fieldset class='repeating_HeroicPath'> <input type="text" class="sheet-hjItem sheet-result" name="attr_hpResult" /> <textarea class="sheet-hjItem sheet-event" name="attr_hptableevent"></textarea> </fieldset> </div> </div> And here's the CSS: .sheet-HJ {   display: inline-flex;   width: 100%;   flex-flow: row wrap;   justify-content: flex-start;   align-items: flex-start; } .sheet-hjItem {   /*border: 1px solid red;*/   flex: 0 0 auto;   align-self: flex-start;   box-sizing: border-box;   margin: 0 0 4px 0; } .sheet-result {   width: 19.5%;   border: none;   border-bottom: 1px solid black;   text-align: center;   margin: 0 2px 0 0; } .sheet-event {   width: 79.5%;   border: none;   border-bottom: 1px solid black;   margin: 0 0 0 2px; } h3.sheet-result, h3.sheet-event {   display: inline-flex;   border: none; } textarea.sheet-event {   width: 79%;   height: 13px;   max-width: 79%;   min-width: 79%;   min-height: 13px; } NOTE: the textarea height of 13px was because that aligned nicely with the text input in jsfiddle...I was trying to figure out the correct height for it in Roll20 when I got the behavior above...

I'd make sure your sheet-hj is actually displaying as flex via the inspector. You might be running afoul of a priority issue.

Scott C. said: I'd make sure your sheet-hj is actually displaying as flex via the inspector. You might be running afoul of a priority issue. So, sheet-HJ is displaying as a flex, but unfortunately, the repeating items are not directly in sheet-HJ, but in repitem div within sheet-HJ. :-/ I was hoping to keep my code cleaner by not having to recreate the sheet-HJ div within the repeating section, but looks like I may have to...

Ah, missed that. Then you can use display:content  to essentially eliminate the .repitem container.

Where would that go?

You'd set your repitem to that; although it may not work as the buttons for moving/deleting items may get screwed up, bit worth a shot. Brief article on it:<a href="https://css-tricks.com/get-ready-for-display-contents/" rel="nofollow">https://css-tricks.com/get-ready-for-display-contents/</a>

Cool. &nbsp;Thanks, I'll see what happens.