Considere o seguinte trecho de um documento em HyperText Markup Language:

<div id="secao1" class="align">
  <span class="item"></span>
  <span class="item"></span>
</div>

Considere o respectivo código de Cascading Style Sheets:

.align {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: row-reverse;
}

.item {
  width: 10%;
  height: 10%;
  border-radius: 50%;
  flex-shrink: initial;
  background-color: red;
}

Na renderização por um navegador web padrão, a largura total ocupada pelo elemento “secao1” e o conteúdo exibido devem ser, respectivamente: