Using flex to align an icon horizontally with text-CodePudding

Struggling to align my icon horizontally with the title (50% above the title/ 50% below) - the below perhaps doesn't fully indicate the issue as the there is a red fill added, but the icon I am using as a little extra space top & bottom so it looks like it's sitting below. Using StyledComponents with React but this code snippet below replicates the issue.

.accordion {
  background-color: #e5e9eb;
  height: 174px;
  max-width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;  
}

.title {
  font-size: 0.75rem;
  letter-spacing: 0.063rem;
  text-transform: uppercase;
  padding-left: 24px;
  padding-top: 20px;
  padding-bottom: 0px;
}

.icon {
  background-color: red;
  height: 40px;
  width: 40px;
  float: right;
  margin-right: 12px;
}

.span {
  line-height: 1.25rem;
  padding-left: 24px;
  padding-right: 24px;
  display: block;
}

<div class="accordion">
  <h3 class="title">TEXT THAT SHOULD BE LEVEL WITH ICON
    <div class="icon"></div>
  </h3>
  <span class="span">Icon should be horizontally level with title text</span>
</div>

CodePudding user response：

Check below snippet.

.accordion {
  background-color: #e5e9eb;
  height: 174px;
  max-width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;  
}

.title {
  font-size: 0.75rem;
  letter-spacing: 0.063rem;
  text-transform: uppercase;
  padding-left: 24px;
  padding-top: 20px;
  padding-bottom: 0px;
  display: flex;
  align-items: center;
}

.title span {
  flex: 1;
}

.icon {
  background-color: red;
  height: 40px;
  width: 40px;
  float: right;
  margin-right: 12px;
}

.span {
  line-height: 1.25rem;
  padding-left: 24px;
  padding-right: 24px;
  display: block;
}

<div class="accordion">
  <h3 class="title">
    <span>TEXT THAT SHOULD BE LEVEL WITH ICON</span>
    <div class="icon"></div>
  </h3>
  <span class="span">Icon should be horizontally level with title text</span>
</div>