How can I vertically align my text lines? - html

Question

I'm having a problem with vertical alignment with my text lines. I have two text lines, <p>, and I want to put the second one in the bottom of my <div> so I tried to do vertical-align: bottom and text-bottom and the top and bottom ones in my <p> and that didn't work.
.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>

Answer 1

I'd suggest the following, which involves some minor updates to your HTML; explanations are in the comments to the code itself:
.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;
/* here we specify the use of CSS Grid layout: */
display: grid;
/* define the top-and-bottom (0) and left-and-right (5px) grid
gap gutters: */
grid-gap: 0 5px;
/* define the named areas of the grid: */
grid-template-areas:
". paragraphAreaOne imageOne imageTwo"
". . imageOne imageTwo"
". paragraphAreaTwo imageOne imageTwo";
/* define the sizing of the columns; here we have the first column
taking up one fractional unit (1fr), with the other columns sized,
using the repeat() function, at min-content in order to have those
grid-columns sized to the minimum necessary to contain their content: */
grid-template-columns: 1fr repeat(3, min-content);
/* here we have three rows each sized, using the repeat() function,
to size each row to min-content: */
grid-template-rows: repeat(3, min-content);
}
/* positioning the various elements into the appropriate grid areas: */
.headerRight p:first-of-type {
grid-area: paragraphAreaOne;
}
.headerRight p:nth-of-type(2) {
grid-area: paragraphAreaTwo;
}
.headerRight img:first-of-type {
grid-area: imageOne;
}
.headerRight img:nth-of-type(2) {
grid-area: imageTwo;
}
<div class="layout">
<div class="header">
<div class="headerRight">
<!-- your img elements were wrapped in <p> elements, which were removed,
partially for semantic reasons, and partially because they were
simply unnecessary -->
<img src="https://i.imgur.com/V2aWxOK.png" style="height: 13vh" />
<img src="https://i.imgur.com/V2aWxOK.png" style="height: 13vh" />
<p>Ola</p>
<!-- there was a <br> element here which, when using a Grid layout
serves no purpose, so was removed -->
<p>Ola</p>
</div>
</div>
</div>
JS Fiddle demo.
References:
gap/ grid-gap
grid-template-areas.
grid-template-columns.
grid-template-rows.
min-content.
repeat().

Answer 2

you are using grid so u can use align-items:end to the header and it will align your elements to the bottom here take a look at it https://developer.mozilla.org/en-US/docs/Web/CSS/align-items