Não tem certeza do tamanho? Tabela It

Se o conteúdo precisa preencher um tamanho especificado exatamente, mas pode ser composto de partes com tamanho arbitrário, pode ser útil usar a tabela de exibição e a célula de tabela. Isso garantirá que a largura do pai seja sempre obedecida independentemente de alterações na largura de um elemento.

Lembre-se de que qualquer elemento table-cell deve ter um pai com display: table para aparecer formatado corretamente.

.group {
  display: table;
}
/* these two elements will always fill the input exactly regardless of the text content of the button */
.group input {
  display: table-cell;
}
.group .button {
  display: table-cell;
}

<div class="group">
  <input type="text" placeholder="Search...">
  <div class="button">I can be as long as i want to be</div>
</div>

Infelizmente, a sombra da caixa deve ser definida como uma regra única, sem a capacidade, como a borda, de ser dividida em partes separadas para posicionamento, cor e distância.

No entanto, existe um truque para permitir que uma única definição de sombra de caixa apareça em várias cores.

A sombra da caixa herda sua cor de um local improvável se nenhum for especificado, o atributo de cor do elemento.

.widget {
  -webkit-box-shadow: 0em 0.2em 0em inset;
  -moz-box-shadow: 0em 0.2em 0em inset;
  box-shadow: 0em 0.2em 0em inset;
}
/* This will also have a red box shadow */
.red.widget {
  color: #FF0000;
}

Para obter mais dicas de CSS, visite Semantic UI CSS Guide