Not Sure the Size? Table It

If content needs to fill a specified size exactly, but may be made up of parts with arbitary size, it can be useful to use display table and table-cell. This will make sure the parent width is always obeyed regardles of alterations to an element's width.

Keep in mind any table-cell element must have a parent with display:table to appear formatted correctly.

.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>

Unfortunately box shadow must be defined as a single rule, without the ability, like border, to be broken up into separate parts for positioning, color and distance.

There is however one trick to allowing for a single box shadow definition to appear as multiple colors.

Box shadow inherits its color from an unlikely place if none is specified, the color attribute of the element.

.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;
}

For more CSS tips, visit Semantic UI CSS Guide