Align items baseline for a select - html

Question

I've got a header. In this header there's a title and a picker. The picker is a simple label with a select underneath it. I wish to align the baselines of the title and the text inside the select. If I use align-items: baseline, then the baseline of the title is aligned with the baseline of the label, not the text in the select.
How can I align the baseline of the title with the baseline of the select, instead of the label?
The reproducing code is
<div style="display:flex;align-items:baseline">
<span style="font-size:23px;padding-top:16px">A title</span>
<div>
<div><span>A label</span></div>
<div><select><option>An option</option></select></div>
</div>
</div>

Answer 1

How can I align the baseline of the title with the baseline of the
select, instead of the label?
Based on your markup, what you need is margin-top:auto on your title span.
div.wrap > span { margin-top: auto; }
However, that may not really be an exact baseline because that would depend a lot on the font-size, line-height, padding etc. not only on your title span but also on the select itself.
The snippet below will help to visualize that with the red line showing the baselines:
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
div.wrap { display: flex; margin: 8px; position: relative; }
div.wrap > span { margin-top: auto; margin-right: 4px; font-size: 1.5em; }
div.wrap select { padding: 2px; }
div.wrap::after {
content: ''; display: block;
position: absolute; left: -4px; bottom: 4px;
width: 240px; height: 1px;
background-color: #f00;
}
<div class='wrap'>
<span>A title</span>
<div>
<div><span>A label</span></div>
<div><select><option>An option</option></select></div>
</div>
</div>
Accompanying Fiddle: http://jsfiddle.net/abhitalks/n4z98wvn/
Now why is baseline not aligning with the baseline? It actually does. If you split your label into multiple lines, you'll see that it does align with the baseline of the first line. You could see that clearly by comparing it with flex-start.
As pointed out by #Paulie_D, you could also get the intended result with flex-end. However the same problem as mentioned in my first solution, remains. You could see that clearly by comparing it with a reduced line-height on title.
Below are all the comparisons.
Comparison Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
div.wrap { display: flex; align-items: baseline; margin: 16px; }
div.wrap > span { font-size: 23px; border: 1px solid #ddd; }
div.wrap:nth-of-type(2) { align-items: flex-start; }
div.wrap:nth-of-type(3) { align-items: flex-end; }
div.wrap:nth-of-type(4) { align-items: flex-end; }
div.wrap:nth-of-type(4) > span { line-height: 20px; }
<div class="wrap">
<span>A title</span>
<div>
<div>
<span>
A label<br/>which breaks into<br/>lines,
is aligned at baseline with the title.
</span>
</div>
<div><select><option>An option</option></select></div>
</div>
</div>
<div class="wrap">
<span>A title</span>
<div>
<div>
<span>
A label<br/>which breaks into<br/>lines,
is aligned at flex-start with the title.
</span>
</div>
<div><select><option>An option</option></select></div>
</div>
</div>
<div class="wrap">
<span>A title</span>
<div>
<div>
<span>
A label<br/>which breaks into<br/>lines.
The select is mis-aligned with the title.
</span>
</div>
<div><select><option>An option</option></select></div>
</div>
</div>
<div class="wrap">
<span>A title</span>
<div>
<div>
<span>
A label<br/>which breaks into<br/>lines.
The select is aligned neatly with the title.
</span>
</div>
<div><select><option>An option</option></select></div>
</div>
</div>
Comparison Fiddle:http://jsfiddle.net/abhitalks/r8spzk54/1/

Answer 2

Try this:
HTML (no changes; except removed some inline styles and added id)
CSS
#container {
display: flex;
}
#container > div {
display: flex;
flex-direction: column;
}
DEMO: http://jsfiddle.net/c7n0222p/4