Please help with Flexbox

Hi :wave:
I really need some help with my calculator Flexbox.

some items are not lining up.

the 0 and . items should be below the 1 2 3

	<div class="flex-container">
		  <div id="jumbo">AC</div>
      <div style="align-self: flex-start">1</div> 
  		<div style="align-self: flex-start">2</div>
		  <div style="align-self: flex-start">3</div>      
      <div id="equals">=</div> 
      <div id="jumbo" style="align-self: flex-start">0</div>
      <div style="align-self: flex-start">.


.flex-container {
  display: flex;
  flex-wrap: wrap;
  border:1px solid red;
  height: 100px;
  justify-content: center;
  align-items: center;
  background-color: DodgerBlue;

.flex-container > div {

  background-color: #f1f1f1;
  margin: 0px;
  outline: 1px solid;
  padding: 20px;
  text-align: center;
  font-size: 20px;
#jumbo {
#equals {

When you make #equals double height, you double the height of the row it’s on. If you switch 1, 2, or 3 to flex-end you can see them move to the end. If you want to keep this styling I think you need to relative the 0 and . and manually put them where they go.

or switch to CSS:grid =)