CSS: Positioning an icon level with text

Issue

I have the following styles, which implement the desired effect of the "icon" sitting horizontally level with "MAIN TEXT" - however, I want my "MAIN TEXT" to have a spacing of 12px to "Item one". Currently the 12px starts at the bottom of the icon, which is bigger than the heading. Can anyone advise how to keep the icon level with the heading whilst being able to define spacings between the heading & item one?

.container {
   border-radius: 2px;
   border: 1px solid #da291c;
   background: rgba(218,41,28,0.06);
   padding: 1.25rem;
}

.label {
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: 0.063rem;

  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
}

.icon {
  background-color: red;
  height: 40px;
  width: 40px;
}

.list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
  margin-top: 0;
}

<div class="container">
  <div class="label">
    MAIN TEXT
    <div class="icon"></div> 
  </div>  
  <ul class="list">Item one</ul>
</div>

I had tried to set the icon outside of the label, but this was the only way I could keep them horizontally aligned.

DESIRED OUTCOME:

Container should have 1.25rem padding around all sides - with "Item one" sitting exactly 12px below "MAIN TEXT"

meanwhile the icon should be aligned with "MAIN TEXT" and not it & "Item one"

Solution

One way to fix is to set the height as height: 0.75rem; for label that equal the font-height of the text & let the icon overflow.

.container {
   border-radius: 2px;
   border: 1px solid #da291c;
   background: rgba(218,41,28,0.06);
   padding: 1.25rem;
}

.label {
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: 0.063rem;
  height: 0.75rem;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
}

.icon {
  background-color: red;
  height: 40px;
  width: 40px;
}

.list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
  margin-top: 0;
}

<div class="container">
  <div class="label">
    MAIN TEXT
    <div class="icon"></div> 
  </div>  
  <ul class="list">Item one</ul>
</div>

Answered By - deepakchethan