Aligning the Top of Text in Two Divs

Question

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>

remove margin from p and h1 – Temani Afif Jul 10 '20 at 00:00 — Temani Afif, Jul 10 '20 at 00:00

score 1 · Answer 1 · answered Jul 10 '20 at 00:02

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>

Aligning the Top of Text in Two Divs

1 Answers1