Set text on the same y-aligment line-CodePudding

I've been stuck on this problem for hours.

This is my Header.js

  <div className="navbar-inner">
      <h2>Text1</h2>
      <h3>Text2</h3>
  </div>

This is my Header.css file:

.navbar-inner {
   margin: 0 auto;
   color: #fff;
   display: flex;
   width: 87vw;
   background-color: red;
   justify-content: space-between;
   vertical-align: sub;
}

This is what is shown:

I would like Text1 and Text2 to be aligned on the same y-line:

CodePudding user response：

You can give flex on h2 and h3 tag.

h2, h3 {
  display: flex;
  align-items: center;
}

CodePudding user response：

align-items is what you need for vertically aligning text when using flex box.

I also removed the margin from the h2 and h3 elements (it is there by default).

.navbar-inner {
   margin: 0 auto;
   color: #fff;
   display: flex;
   width: 87vw;
   background-color: red;
   justify-content: space-between;

   /* New styles */
   align-items: flex-end;
   padding: 5px;
}

h2, h3 {
  margin: 0;
}

You will probably need to adjust the padding to align it how you actually want it in terms of how close the text should be to the edges.