vertical align :after with multi line text

Question

I have a list of items. An item has a title and text. After the text I want a 'checked icon'. This icon must be aligned to the right and in de middle of the text.

The problem now is that the icon is aligned at the bottom of the text;

#main-box {
  padding: 30px;
  -moz-border-radius: .25rem;
  -webkit-border-radius: .25rem;
  border-radius: .25rem;
  background-color: rgba(255, 255, 255, 0.9);
  width: 80%;
  margin: 0 auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.item cl-title {
  font-weight: bold;
  margin-bottom: 15px;
}

.item cl-text {
  font-style: italic;
  font-size: .75rem;
  vertical-align: middle;
}

.item cl-text:after {
  /* content: "\f00c"; */
  /* font: normal normal normal 30px/1 FontAwesome; */
  content: "V";
  color: Green;
  float: right;
}

<div id="main-box">
  <div class="checklist">
    <div class="item">
      <div class="cl-title">title</div>
      <div class="cl-text">some text <br/> some text<br/>
      </div>
      <div class="item">
        <div class="cl-title">title</div>
        <div class="cl-text">some text
        </div>
      </div>
    </div>

Answer 1

Hey you can use display:flex and align-items: center to align icon vertically middle. Please have a look on following code and output it will help you.

#main-box {
  padding: 30px;
  -moz-border-radius: .25rem;
  -webkit-border-radius: .25rem;
  border-radius: .25rem;
  background-color: rgba(255,255,255,0.9);
  width: 80%;
  margin: 0 auto;
}

.item .cl-title { 
  font-weight: bold; 
  margin-bottom: 15px; 
}
.item .cl-text { 
  font-style: italic;                
  font-size: .75rem;
  display: flex;
  align-items: center;
}

.item .cl-text:after {
  content: "\f00c";
  font: normal normal normal 30px/1 FontAwesome;
  color: Green;
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div id="main-box">
    <div class="checklist">
      <div class="item">
         <div class="cl-title">title</div>
         <div class="cl-text">some text <br/> some text<br/>
      </div>
      <div class="item">
         <div class="cl-title">title</div>
         <div class="cl-text">some text
      </div>
    </div>
</div>