Vertically align icon in middle when text falls to two lines - css

Question

I have an icon that I am vertically aligning in middle of a container using flexbox.... it looks like this
but when moving over to a small screen, when the text falls to two lines, the image is not vertically aligned where I want it to be:
I want it to be vertically aligned in the middle to the last line of text only, not vertically aligned in the middle of both lines of text. This is the result I want, with the info icon being inline with "here" and in the middle:
How can I go about achieving this?
.card-heading {
padding: 30px 20px 10px;
display:flex;
font-size:50px;
}
button {
background:none;
border:none;
align-items: center;
}
button img {
height:30px;
}
<h2 class="card-heading"><span>CONTENT IN HERE </span><button class="card-more-imfo" type="button"><img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png"></button></h2>

Answer 1

You need to change your element structure as below. You need to position your button relative to the latest parent span element which is <span>HERE</span> with help of position: absolute.
.card-heading {
/*padding: 30px 20px 10px; removing extra padding to accommodate both versions in single screen and one not need to scroll*/
display:flex;
font-size:50px;
}
span{
position: relative;
}
button {
position: absolute;
background:none;
border:none;
align-items: center;
right: 0;
top: 50%;
transform: translate(100%, -50%);
}
button img {
height:30px;
}
.demo-2{
max-width: 200px; /*experiment purpose */
}
<h2 class="card-heading">
<span>CONTENT IN
<span>HERE
<button class="card-more-imfo" type="button">
<img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png">
</button>
</span>
</span>
</h2>
<h2 class="card-heading demo-2">
<span>CONTENT IN
<span>HERE
<button class="card-more-imfo" type="button">
<img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png">
</button>
</span>
</span>
</h2>

Answer 2

I took the liberty to make some changes on your HTML tags, instead of using h2 as the parent element I decided to use a div instead and place h2 and img tags inside.
Example: https://i.stack.imgur.com/3Jl3r.png
<div class="card-heading">
<h2> CONTENT IN HERE </h2> <img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png">
</div>
I had to use media queries rules and change your positioning on the icon, changing it to absolute and then added padding-top.
.card-heading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 50px;
height: auto;
width: 100%;
border: 1px solid black;
}
button {
background: none;
border: none;
}
img {
height: 30px;
width: 30px;
position: absolute;
right: 21px;
padding-top: 55px;
}
#media screen and (min-width: 768px) {
.card-heading {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 50px;
height: auto;
border: 1px solid black;
}
button {
background: none;
border: none;
}
img {
height: 30px;
width: 30px;
position: relative;
padding: 0;
right: 0;
}
}
```

Answer 3

you can either both the class of the image and of the text float to left to have them aligned as you need... i.e. in .card-heading and whichever is the class of the info image. just write float:left;