CSS Grid - Align-self just above the center - html

Question

I have the following HTML code
<header>
<nav>
<ul>
<li>Childhood</li>
<li>Early years</li>
<li>End</li>
<li>About this</li>
</ul>
</nav>
<div id="header-content">
<div id="info-title">
<h1 id="title">Henry Charles Bukowski Jr.</h1>
<h2>"Find what you love and let it kill you."</h2>
</div>
<figure>
<img src="images/charles-img1-2x.png" alt="Charles Bukowski's picture">
</figure>
</div>
<div id="tribute-info">
<p>8/16/1920</p>
<p>3/09/1994</p>
</div>
<span class="next">next section</span>
</header>
Which presents this page with the CSS:
https://prnt.sc/qx4qim
CSS:
/* Montserrat font import */
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,600,700&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background-color: #2F2E2E;
}
#main {
font-family: 'Montserrat', sans-serif;
color: #E0E1DD;
}
header,
section {
padding: 40px 60px;
height: calc(100vh - 80px);
}
#childhood,
#end {
background: #31303B;
}
ul {
list-style: none;
}
/* text style */
h1 {
font-weight: bold;
font-size: 80px;
}
h2 {
font-weight: 100;
font-size: 60px;
}
h3 {
font-weight: 600;
font-size: 60px
}
h4 {
font-weight: 600;
font-size: 50px;
}
p {
font-weight: 400;
font-size: 45px;
}
/* text style end */
/* nav link */
nav ul {
display: flex;
justify-content: space-between;
font-weight: 300;
font-size: 50px;
}
nav ul li a {
text-decoration: none;
color: #E0E1DD;
transition: .3s color;
}
nav ul li a:hover {
color: rgb(138, 128, 128);
}
/* nav links end */
#header-content {
display: flex;
}
#info-title{
align-self: center;
}
header figure img {
height: auto;
max-height: 850px;
max-width: 630px;
}
I align the texts on the page with the align-self: center property; but if I want to upload these texts a bit to look like this: https://prnt.sc/qx4qol
Is there a property that allows me to enter numeric values for vertical alignment?
The top property does not work since the display is set to flex

Answer 1

I think if you move:
<div id="tribute-info">
<p>8/16/1920</p>
<p>3/09/1994</p>
</div>
into the header-content element then modify the css to this, should do the trick:
.header { position: relative; }
.tribute-info { position: absolute; bottom: 15px; left: 15px; }

Answer 2

add display: flex; and flex-direction: column; to header
add margin: auto 0; to #header-content
/* Montserrat font import */
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,600,700&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background-color: #2F2E2E;
}
#main {
font-family: 'Montserrat', sans-serif;
color: #E0E1DD;
}
header,
section {
padding: 40px 60px;
height: calc(100vh - 80px);
}
#childhood,
#end {
background: #31303B;
}
ul {
list-style: none;
}
/* text style */
h1 {
font-weight: bold;
font-size: 80px;
}
h2 {
font-weight: 100;
font-size: 60px;
}
h3 {
font-weight: 600;
font-size: 60px
}
h4 {
font-weight: 600;
font-size: 50px;
}
p {
font-weight: 400;
font-size: 45px;
}
/* text style end */
/* nav link */
nav ul {
display: flex;
justify-content: space-between;
font-weight: 300;
font-size: 50px;
}
nav ul li a {
text-decoration: none;
color: #E0E1DD;
transition: .3s color;
}
nav ul li a:hover {
color: rgb(138, 128, 128);
}
/* nav links end */
#header-content {
display: flex;
margin: auto 0; /*add this*/
}
#info-title{
align-self: center;
}
header figure img {
height: auto;
max-height: 850px;
max-width: 630px;
}
/* add flex*/
header {
display: flex;
flex-direction: column;
}
<header>
<nav>
<ul>
<li>Childhood</li>
<li>Early years</li>
<li>End</li>
<li>About this</li>
</ul>
</nav>
<div id="header-content">
<div id="info-title">
<h1 id="title">Henry Charles Bukowski Jr.</h1>
<h2>"Find what you love and let it kill you."</h2>
</div>
<figure>
<img src="images/charles-img1-2x.png" alt="Charles Bukowski's picture">
</figure>
</div>
<div id="tribute-info">
<p>8/16/1920</p>
<p>3/09/1994</p>
</div>
<span class="next">next section</span>
</header>