How do I get an h1 and h3 to align at the bottom in a flex box?

user_13029515 0
Viewed 504

I would like the H1 and H3 to align at the bottom on the text, I can't get it to happen.

I've made a codepen https://codepen.io/rickgove/pen/RwRvLyj

<div class="flex-div">
  <h1>Title</h1>
  <h3>Description</h3>
</div>

.flex-div{
  background: black;
  color: dodgerblue;
  font-family: monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  margin-right: 1rem;
}
flexbox css
2 Answers

change style to this, it should works:

<style>
.flex-div{
  background: black;
  color: dodgerblue;
  font-family: monospace;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

h1 , h3 {
  margin-right: 1rem;
  margin-bottom:0px;

</style>
user_52717190

That is beacause h1, h2, h3 have margin-bottom value in default browser so set h1, h2, h3 margin-bottom 0px and align self flex-end than it should work

h1,h2,h3{
 align-self:flex-end;
 margin-bottom:0px;
}
user_99311460
Related