Aligning the Top of Text in Two Divs
I’m currently trying to figure out how to align the top of text for two div boxes. The wrapper div is one box and within that I have two other div boxes inside that are beside one another. I want the top of the header text to align with the top of the paragraph text (photo attached). The code below is what I have right now, and the image attached is what I’m wanting. I’ve tried ‘vertical-align:top’ but it’s not working. Any ideas? What I want
.wrapper { display: inline-flex; width: 100%; } #box1, #box2 { vertical-align: top; } #box1 { background: #00FFFF; width: 35%; text-align: right; } #box2 { background: #FF00FF; width: 65%; }<div class="wrapper"> <div id="box1"> <h1>Header</h1> </div> <div id="box2"> <p>Paragraph goes here</p> </div> </div>
just remove the margin on h1
.wrapper { display: inline-flex; width: 100%; } #box1, #box2 { vertical-align: top; border:solid 1px black; } #box1 { background: #00FFFF; width: 35%; text-align: right; } #box2 { background: #FF00FF; width: 65%; } h1{margin:0;}<div class="wrapper"> <div id="box1"> <h1>Header</h1> </div> <div id="box2"> <p>Paragraph goes here</p> </div> </div>
