Aligning div to baseline of the first line of another div?

Question

I've got two divs and would like to align their baselines. However, one of the divs has more than one line of text and some embedded content, and while I'd like to align them to the top baselines, the browser seems to align to the bottom one.

I've built a JSFiddle here to illustrate, with the following HTML:

<div style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
    Here's <div class='embedded'></div> an embedded div and more text
</div>

and CSS:

.embedded {
    width:40px;
    height:40px;
    display:inline-block;
    vertical-align:-15px;
    border:1px solid black;
}

What I'd like is this:

What I get is this:

A pure-CSS solution would be nice, but I'm not against using JavaScript here either. Any help would be greatly appreciated!

luetkemj · Accepted Answer · 2018-02-10T22:52:12.177

4

You can do it quite simply with a wrapping div and a bit of flex box.

.wrapper {
  display: flex;
  align-items: baseline;
}

.note {
  margin-right: 1ch;
}

.embedded {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: -15px;
    border: 1px solid black;
}

<div class="wrapper">
  <div class="note" style='display:inline-block;'>NOTE:</div>
  <div style='display:inline-block; width:200px;'>
      Here's <div class='embedded'></div> an embedded div and more text
  </div>  
</div>

edited Feb 10 '18 at 22:52

answered Feb 10 '18 at 22:29

luetkemj

171
7

That works great! I'm trying to get the same to work with an old Webkit engine (we need to support wkhtmltopdf) using "display:-webkit-inline-box;" in the wrapper and "-webkit-box-align:baseline;" in the boxes. It works for some cases, but with two lines of text seems to be aligning to the bottom baseline again. Do you know if this is the expected behaviour for that standard? – Jason Cooper Feb 10 '18 at 23:50
1

I don't know. flex box implementation was all over the map for a while. – luetkemj Feb 11 '18 at 00:24

score 0 · Answer 2 · answered Feb 10 '18 at 23:04

This will solve your issue:    
 `<div style="display: flex;">
      <div style="padding-top: 13px;">NOTE: &nbsp;</div>
      <div>
        <p style="display:inline">
          Here's
          <span class='embedded'></span>
          an embedded div
          <br/> 
          and more text
        </p>
      </div>
    </div>`

Link : JSFiddle

Aligning div to baseline of the first line of another div?

2 Answers2