Как сделать ширину верхнего блока в зависимости от контента?

Question

[xfqzmkwy]

У меня есть блок #background:

#background {
  background-color: red;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Над этим блоком - еще див #text:

#text {
  position: relative;
  z-index: 1000;
  background-color: black;
  color: #fff;
  text-align: center;
}

<div id="background"></div>
<div id="text">Текст</div>

Как сделать так, чтобы ширина #text была в зависимости от его контента? В итоге он занимает всю ширину и перекрывает #background.

Демка здесь.

Answer 1

[Максим Тимофеев]

Добавить ему
display: inline;

Answer 2

[Товарищ Поляков]

Можно использовать единицы измерения em, задать ширину в процентах