Please help with Flexbox

HTML-CSS
1

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

some items are not lining up.

https://codepen.io/ezequiel_/pen/dxdwdb

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

	<div class="flex-container">
		  <div id="jumbo">AC</div>
		  <div>/</div>
		  <div>x</div>
      <div>7</div> 
 		  <div>8</div>
		  <div>9</div>
		  <div>-</div>
      <div>4</div> 
 		  <div>5</div>
		  <div>6</div>
		  <div>+</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">.
    </div>
      
	</div>

css

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width:320px;
  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;
  width:40px;
  text-align: center;
  font-size: 20px;
}
#jumbo {
  width:120px;
}
#equals {
  position:relative;
  height:120px;
}
2

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

-J