Div com colunas e linhas

[Lezao]

Boa Tarde, pessoal!

estou tentando realizar uma div com bordas e cantos arredondados, mas naun estou conseguindo colocar os conteunos em seu devido lugar.

só consegui colocar os itens nos lugares em foto.

Estou fazendo assim:

  .div1{
    position: relative;  
    width:550px;
    height:150px;
    border:solid 1px;
    border-radius:20px 20px 20px 20px;
    margin-top: 15px;
  }
  .div2{
    position: absolute;
    left: 25%; right: 25%;
    border:solid 0px;
    border-radius:0px 0px 20px 20px;
    text-align: center;
    color: white;
    font-family: Gill Sans Extrabold, sans-serif;
}

/* somente para melhorar a visualização do exemplo */
.div1{ background: white; }
.div2{ background: #2ecc71; height: 20%; }


  <div class='div1'>
    <div class='div2' style="background: #e74c3c;"><b>ENCERRADO</b></div>
  
</div>

  <div class='div1'>
    <div class='div2' style="background: #2ecc71;"><b>EM ANDAMENTO</b></div>
    
</div>

 

 

 

 

veja exemplo na foto:

[Tiago Neves]

O problema no seu código reside na maneira como você está posicionando o div2 dentro do div1. A propriedade left: 25%; right: 25%; está posicionando o div2 em relação ao tamanho total do viewport, e não do div1.

Para solucionar isso, você precisa utilizar o posicionamento relativo (position: relative) no div1 e o posicionamento absoluto (position: absolute) no div2, mas com referência ao div1.


 

.div1 {
  position: relative;  /* Posicionamento relativo para o div1 */
  width: 550px;
  height: 150px;
  border: solid 1px;
  border-radius: 20px;
  margin-top: 15px;
}

.div2 {
  position: absolute;  /* Posicionamento absoluto */
  top: 50%;   /* Centraliza verticalmente */
  transform: translateY(-50%); /* Compensa o deslocamento do top: 50% */
  left: 25%;  /* 25% da largura do div1 */
  right: 25%; /* 25% da largura do div1 */
  border: solid 0px;
  border-radius: 0px 0px 20px 20px;
  text-align: center;
  color: white;
  font-family: Gill Sans Extrabold, sans-serif;
}

/* Apenas para melhorar a visualização do exemplo */
.div1 { background: white; }
.div2 { background: #2ecc71; height: 20%; }