Adaptive border according to text size

Question

What is the correct way to do this is the border below the text? I am currently doing it this way, but if the text is too large and breaks to the bottom line the border does not adapt to the size and breaks as well, as I do so that it adapts to the line break that may have depending on the size of the text?

.blog_post_list {
  width: 695px;
  float: left;
  margin-bottom: 50px;
}
.post-list .post-item:first-child {
  margin-top: 0;
}
.blog_post_item {
  margin-top: 0px;
  padding-bottom: 95px;
  position: relative;
}
.blog_flexbox_grid {
  display: flex;
  padding-bottom: 10px;
}
.blog_flexbox_data {
  width: 17.0%;
}   
.sublinhado {
      border-bottom: 2px solid #fece02;
}
.blog_post_item_imagem {
  position: relative;
}
.blog_post_item_data {
  background-color: #fece02;
  width: 85px;
  height: 35px;
  position: static;
}
.blog_post_item_data > .dia {
  font-size: 16px;
  font-weight: 500;
}
.blog_post_item_data > .mes {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 100;
}
.blog_post_item_data > .dia, .blog_post_item_data > .mes {
  color: #ffffff;
  width: 100%;
  text-align: center;
  line-height: 35px;
  display: block;
  font-size: 20px;
}
.blog_flexbox_titulo {
  width: 83.0%;
  padding-top: 5px;
}   

.blog_flexbox_titulo a {
  width: 83.0%;
}
.blog_titulo_ a {
  font-family: 'Fira Sans', sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: #082755;
  margin: 0;
}
.titulo_blog {
  font-family: 'Fira Sans', sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: #082755;
  margin: 0;
}
.blog_titulo_ a:hover {
  color: #082755;
  text-decoration: none;
}

<div class="container">
  <h2>Blog</h2>	
  <div class="blog_post_list">
    <article class= "blog_post_item">
      <div class="blog_flexbox_grid">
        <div class="blog_flexbox_data sublinhado">
          <div class="blog_post_item_imagem">
            <div class="blog_post_item_data">
              <span class="dia">24.Out</span>
            </div>
          </div>
        </div>
        <div class="blog_flexbox_titulo blog_titulo_ sublinhado">             <a href="#">4 dicas para uma criança ser feliz </a>
        </div>
      </div>
    </article>
  </div>
</div>            

If someone has a light, another way to do it, any help is welcome.

Answer 1

Some modifications are required for this. See the comments in the CSS that have been added and removed (instead of line-height, was used translate to center the date text):

.blog_post_list {
  width: 695px;
  float: left;
  margin-bottom: 50px;
}
.post-list .post-item:first-child {
  margin-top: 0;
}
.blog_post_item {
  margin-top: 0px;
  padding-bottom: 95px;
  position: relative;
}
.blog_flexbox_grid {
  display: flex;
  padding-bottom: 10px;
}
.blog_flexbox_data {
  width: 17.0%;
}   
.sublinhado {
      border-bottom: 2px solid #fece02;
}
.blog_post_item_imagem {
  position: relative;
  display: block;
  height: 100%;
}
.blog_post_item_data {
  background-color: #fece02;
  width: 85px;
/*  height: 35px; */
  position: static;
/* linhas abaixo adicionadas */
  height: 100%;
  display: inline-block;
}
.blog_post_item_data > .dia {
  font-size: 16px;
  font-weight: 500;
}
.blog_post_item_data > .mes {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 100;
}
.blog_post_item_data > .dia, .blog_post_item_data > .mes {
  color: #ffffff;
  width: 100%;
  text-align: center;
/*  line-height: 35px; */
  display: block;
  font-size: 20px;
  /* linhas abaixo adicionadas */
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
transform:translate(0,-50%);
top:50%;
position: relative;
}
.blog_flexbox_titulo {
  width: 83.0%;
  padding-top: 5px;
}   

.blog_flexbox_titulo a {
  width: 83.0%;
}
.blog_titulo_ a {
  font-family: 'Fira Sans', sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: #082755;
  margin: 0;
}
.titulo_blog {
  font-family: 'Fira Sans', sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: #082755;
  margin: 0;
}
.blog_titulo_ a:hover {
  color: #082755;
  text-decoration: none;
}

<div class="container">
  <h2>Blog</h2>	
  <div class="blog_post_list">
    <article class= "blog_post_item">
      <div class="blog_flexbox_grid">
        <div class="blog_flexbox_data sublinhado">
          <div class="blog_post_item_imagem">
            <div class="blog_post_item_data">
              <span class="dia">24.Out</span>
            </div>
          </div>
        </div>
        <div class="blog_flexbox_titulo blog_titulo_ sublinhado"><a href="#">4 dicas para uma criança ser 4 dicas para uma criança ser</a>
        </div>
      </div>
    </article>
  </div>
</div>