Flex item being bumped down exactly half height of previous item - css

Question

I'll include an image for context, then the code:
The box at far right with "ABC" in it and a left/bottom border is being bumped down exactly half the height of the gradient image next to it. I know a lot of the heights/etc don't make sense, but I've removed them all and the problem persists. Any guidance here?
The HTML:
<div className="thing">
<img src="https://unsplash.it/75/90/?blur" alt="hey there" className="thingImage" />
<div className="content">
<span className="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
<span className="thingRanks">
Rank1: 1<br/>
Rank2: 2<br/>
Rank3: 2
</span>
</div>
<div className="thingMeta">
<img src="https://unsplash.it/30/30/?blur" alt="name" className="thingIcon" />
<span className="thingAbbrev">ABC</span>
</div>
</div>
(the "className" is from React, just read it as "class" if you're not familiar with React)
The CSS:
.thing{
border: 1px solid #ccc;
width: 564px;
min-height: 68px;
padding: 10px;
font-family: "Helvetica", arial, sans-serif;
font-size: 14px;
line-height: 18px;
display: flex;
}
.thingImage{
border-radius: 5px;
margin-right: 10px;
}
.thingName{
font-weight: bold;
margin-right: 0.3em;
}
.thingMeta{
margin-left: auto;
align-self: flex-start;
height: 35px;
}
.thingAbbrev{
border-bottom: medium solid #000000;
border-left: medium solid #000;
align-self: flex-start;
padding-left: 5px;
padding-bottom: 5px;
margin-left: 10px;
width: 30px;
}
.thingIcon{
height: 30px;
}
The main focus of this project for me is learning React, using Flexbox is just a bonus for me here. Thanks in advance, any help or guidance is greatly appreciated!

Answer 1

Since the thingMeta is not a flex container (doesn't have display: flex;(1)), the thingAbbrev is not a flex item, hence the align-self: flex-start won't apply .
As the img and span in the thingMeta are normal inline elements, they align along the baseline, so i.e. adding vertical-align: top will align them at the top.
.thing{
border: 1px solid #ccc;
width: 564px;
min-height: 68px;
padding: 10px;
font-family: "Helvetica", arial, sans-serif;
font-size: 14px;
line-height: 18px;
display: flex;
}
.thingImage{
border-radius: 5px;
margin-right: 10px;
}
.thingName{
font-weight: bold;
margin-right: 0.3em;
}
.thingMeta{
margin-left: auto;
align-self: flex-start;
height: 35px;
}
.thingAbbrev{
border-bottom: medium solid #000000;
border-left: medium solid #000;
/* align-self: flex-start; removed */
vertical-align: top; /* added */
padding-left: 5px;
padding-bottom: 5px;
margin-left: 10px;
width: 30px;
}
.thingIcon{
height: 30px;
}
<div class="thing">
<img src="https://unsplash.it/75/90/?blur" alt="hey there" class="thingImage" />
<div class="content">
<span class="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
<span class="thingRanks">
Rank1: 1<br/>
Rank2: 2<br/>
Rank3: 2
</span>
</div>
<div class="thingMeta">
<img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
<span class="thingAbbrev">ABC</span>
</div>
</div>
Alternatively you can of course also simply add display: flex to the thingMeta. The downside with that is that your img then becomes a flex item and based on what you want to do with it, there is some cross browser issues, and many of them can be avoided by wrapping the img (which I didn't in below sample)
.thing{
border: 1px solid #ccc;
width: 564px;
min-height: 68px;
padding: 10px;
font-family: "Helvetica", arial, sans-serif;
font-size: 14px;
line-height: 18px;
display: flex;
}
.thingImage{
border-radius: 5px;
margin-right: 10px;
}
.thingName{
font-weight: bold;
margin-right: 0.3em;
}
.thingMeta{
margin-left: auto;
align-self: flex-start;
height: 35px;
display: flex; /* added */
}
.thingAbbrev{
border-bottom: medium solid #000000;
border-left: medium solid #000;
align-self: flex-start;
padding-left: 5px;
padding-bottom: 5px;
margin-left: 10px;
width: 30px;
}
.thingIcon{
height: 30px;
}
<div class="thing">
<img src="https://unsplash.it/75/90/?blur" alt="hey there" class="thingImage" />
<div class="content">
<span class="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
<span class="thingRanks">
Rank1: 1<br/>
Rank2: 2<br/>
Rank3: 2
</span>
</div>
<div class="thingMeta">
<img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
<span class="thingAbbrev">ABC</span>
</div>
</div>
(1) When display: flex is set on an element, it is only its children that becomes flex items

Answer 2

You need to set the below CSS and html
CSS:
.vcenter{
display: flex;
align-item: center;
justify-content: center;
}
Also I wrapped the <span class="thingAbbrev">ABC</span> in another span to get rid of an height issue due to margins.
HTML:
<div class="thingMeta vcenter">
<img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
<span class="vcenter"><span class="thingAbbrev">ABC</span></span>
</div>
JSFiddle: here