I'm encountering an issue with aligning my text vertically in two lines within a <p> tag. I am trying to position the second line at the bottom of my <div>. I experimented with using vertical-align: bottom and text-bottom along with the top and bottom properties in my <p>, but unfortunately, it did not produce the desired result.
.header {
grid-area: header;
background-color: red;
display: grid;
grid-template-areas: 'headerLeft rest headerRight';
grid-template-columns: 10% 1fr 30%;
padding: 5px;
}
.header p {
margin: 0px;
}
.headerRight {
grid-area: headerRight;
}
.headerRight p {
float: right;
}<div class="layout">
<div class="header">
<div class="headerRight">
<p style="margin: 0px 0px 0px 1px;"><img src="https://i.imgur.com/V2aWxOK.png" style="height: 13vh" /></p>
<p><img src="https://i.imgur.com/V2aWxOK.png" style="height: 13vh" /></p>
<p style="margin: 0px 5px 0px 0px">Ola</p>
<br />
<p style="margin: 0px 5px 0px 0px">Ola</p>
</div>
</div>
</div>