CSS: Positioning an icon level with text-CodePudding

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"

CodePudding user response：

I'have modified a little your code. I set flex to your container and put the icon outside of label.

.container {
  border-radius: 2px;
  border: 1px solid #da291c;
  background: rgba(218, 41, 28, 0.06);
  padding: 1.25rem;
  /* add */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:flex-start;
}

.label {
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: 0.063rem;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 12px;
}

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

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

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

  </div>
  <div class="icon"></div>
</div>

CodePudding user response：

This is what you need to do :)

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


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

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

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

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