如何让 h1 和 h3 在弹性盒的底部对齐？

Question

我希望 H1 和 H3 在文本底部对齐，但我无法实现。

我做了一个代码笔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;
}

Answer 1

将样式更改为此，它应该可以工作：

<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>