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...