elements one over the other

Question

I’m learning to use some tags and I’m not being able to put the button on top of that text, the goal would be to have the title and the text and the button and the little text on the side of someone could explain to me how to do this? I leave an example image

.cookies {
  position: fixed;
  background-color: gray;
  color: black;
  padding: 15px;
  text-align: left;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  height: auto;
}

.lado {
  display: flex;
  height: auto;
  bottom: 0;
}

.lado1 {
  height: auto;
  bottom: 0;
}

.lado2 {
  height: auto;
  bottom: 0;
}

<aside class="cookies">
  <div class='lado1'>
    <h1>Este site usa cookies</h1>
    <p>O SAPO e os seus parceiros utilizam Cookies para manter informação do visitante, permitindo determinar as suas preferências, auxiliar no preenchimento de formulários, permitir o acesso a áreas privadas do website onde seja necessária autenticação,
      bem como recolher indicadores de performance, origem e horário dos acessos ao website.</p>
  </div>
  <div class='lado'>
    <button type="button" class='lado'>Fechar</button>
  </div>
  <div class='lado2'>
    <p>Mostrar objetivos <br> Ver lista completa de vendedores</p>
  </div>

</aside>
<div class="porcima"></div>

Answer 1

Guy basically just put the button and the text below it inside a container, tb with flex, and set as Column and align in the center.

The flex has a property that you determine whether the elements within it will be in ROW, row, or in COLUMN, columns, for that use flex-direction: column;

See the code below, what I changed I left commented.

  .cookies {
    position: fixed;
    background-color: gray;
    color: black;
    padding: 15px;
    text-align: left;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    height: auto;
  }
  
  .lado {
    display: flex;
    height: auto;
    bottom: 0;
  }
  
  .lado1 {
    height: auto;
    bottom: 0;
  }
  
  .lado2 {
    height: auto;
    bottom: 0;
  }

/*novos estilos*/
* {
  box-sizing: border-box;
}
.direita {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

  <aside class="cookies">
    <div class='lado1'>
      <h1>Este site usa cookies</h1>
      <p>O SAPO e os seus parceiros utilizam Cookies para manter informação do visitante, permitindo determinar as suas preferências, auxiliar no preenchimento de formulários, permitir o acesso a áreas privadas do website onde seja necessária autenticação,
        bem como recolher indicadores de performance, origem e horário dos acessos ao website.</p>
    </div>
    <div class="direita"> <!-- Div direita como o btn e o texto dentro -->
      <div class='lado'>
        <button type="button" class='lado'>Fechar</button>
      </div>
      <div class='lado2'>
        <p>Mostrar objetivos <br> Ver lista completa de vendedores</p>
      </div>
    </div>
  
  </aside>
  <div class="porcima"></div>