Problemas com posicionamentos

[lezão 0]

Boa Tarde, pessoal!

Td bem com vcs?

Olha eu ai novamente!

Pesquisei e  fucei e nada, não consegui nada, não de ficar enchendo o saco de vcs, mas qnd a corda aperta, corro aqui para um help.

Estou com um código que roda perfeitamente, mas qnd eu preciso de um posicionamento, naun vai.

 

vejam na imagem abaixo para entender?

 

 

Vejam que o valor e os outros item abaixo dele, dependendo da quantidade de texto ele fica em um ponto.

Gostaria que ele ficasse, com muito ou pouco texto na posição da 3ª imagem.

Será possivel isso ?

 

meu codigo CSS:

.banner img {
  max-width: 100% !important;
  height: 200px;    
}
.container-cards {
  flex-wrap: wrap;
  display: inline-flex;
  width: 400px; 
  align-items: center;
  justify-content: center;
}

.box-container {
  /*border: 1px solid red;*/
  display: flex;
  background: #fcfcfc;
  font:80%/1 Arial;
  font-size: 14px;
  border-radius: 5px;
  align-items: center;
  width: 100%;
  height: 80px;
  border: 0px solid #AAAAAA;
  margin: 5px;
  background-color: #fcfcfc;
  -webkit-box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77);
  -moz-box-shadow:    1px 3px 5px rgba(250, 242, 242, 0.77);
  box-shadow:         1px 3px 5px rgba(250, 242, 242, 0.77);
}
.box-image {
  width: 20%;
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: left;
  border-right: 0px solid #AAAAAA;
}
.box-container .box-image img {
  width: 75px;
  height: 75px;
}
.box-container .box-content {       
  align-items: left;
  display: flex;
  height: 75%;
  justify-content: left;
  flex-direction: column;
  padding: 10px;
}
.title {
  margin-bottom: 10px;
  font-size: 16px
  font-weight: bold;
  color: #000;   
  }
.description {
  font:80%/1 Arial;    
  font-size: 14px;
  color: #8a8686;
  top: 50px;
  left: 50px;
} 

Codigo HTML:

  <div class="box-container">
    <section class=box-image>&nbsp;
      <img src="<?php echo $Foto_produto; ?>" style="border-radius:10px" width="250px" height="230px"/>
    </section>
    <section class="box-content">
      <label class="title">  <div align="left"><b><?php echo strtoupper($Nome_produto); ?></b></div></label>
      <span class="description"><div align="left"><?php echo $Descricao_produto; ?></div></span>
    </section>
    <section class=box-image-2>
      <label class="title"><div align="center"><b><?php echo($Valor_produto) ?></b></div></label>
      <span class="description">
          <div align="left"><br/>
          <input type="checkbox" name="sabor" id="evento_value2" value="<?php echo $Valor_produto; ?>">
          <input type="hidden" name="vl_sabor" value="<?php echo $Valor_produto; ?>">
            <SELECT name="qntdade" width="2">  
<option value="1">1</option> 
<option value="2">2</option> 
</SELECT>                                                 
      </div></span>      
    </section>    
  </div>

Desde ja muito obrigado!

[wanderval 19]

.box-image-2 {
  display: flex;
  align-items: center;
}

https://jsbin.com/hukerubeve/edit?html,css,output