Title: How to line up an icon with a stacked heading and subtext?
Tags: html;css;icons;html-heading
Question: I have been wrestling with lining up an image icon (not a font icon) with a heading and text.
I have found some good examples of how this is done but not with a heading and if so it was using a fontawesome icon which I am trying to avoid.
.soccer-icon {
width: 50px;
.icon-header {
font-size: 18px;
line-height: 32px;
display: block !important;
padding-right: 20px
.icon-area {
display: flex;
align-items: center;
<div class="icon-area"&gt;
<p&gt;
<img class="soccer-icon" src="https://cdn1.iconfinder.com/data/icons/sports-balls-4/32/balls_filled_outline-01-512.png" /&gt;
</p&gt;
<h3 class="icon-header"&gt;Paper Ballot Inspection</h3&gt;
<p&gt;A full count of the ballots, including scanning and visual inspection of all ballots.</p&gt;
</div&gt;
Comment: I ran what you provided on my side and they line up. Are you more so trying to get the text so it's lined up with the middle of the image?

Comment: @Brandon he wants the text stacked. Not side by side


Here is another answer: You can wrap the <h3&gt; and <p&gt; elements in a parent <div&gt; and make it a flexbox column layout so the text is stacked vertically. Then, remove the default margins from h3 and paragraph elements in that container so they are grouped more closely together.
With your existing align-items: center declaration on .icon-area, this seems to create the style you were going for.
.soccer-icon {
width: 50px;
.icon-header {
font-size: 18px;
line-height: 32px;
display: block;
padding-right: 20px
.icon-area {
display: flex;
align-items: center;
max-width: 80ch; /* for demo */
.column {
display: flex;
flex-direction: column;
.column h3,
.column p,
.icon-area p {
margin: 0;
<div class="icon-area"&gt;<p&gt;
<img class="soccer-icon" src="https://cdn1.iconfinder.com/data/icons/sports-balls-4/32/balls_filled_outline-01-512.png" /&gt;
</p&gt;
<div class="column"&gt;
<h3 class="icon-header"&gt;Paper Ballot Inspection</h3&gt;
<p&gt;A full count of the ballots, including scanning and visual inspection of all ballots. Some more text to occupy two lines.</p&gt;
</div&gt;
</div&gt;

Here is another answer: Here you go,
https://jsfiddle.net/2ro6dqay/
I have put both the headings in separate <div&gt;'s and then styled them

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:08/27/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><icons><html-heading>', 'Title': 'How to line up an icon with a stacked heading and subtext?', 'ViewCount': 92, 'id': 68957563, 'user_AboutMe': '', 'user_AccountId': 1127403.0, 'user_DisplayName': 'lcm', 'user_Reputation': 1727.0, 'user_Views': 214.0, 'user_id': 1114330.0}}