Question

I have a div.one which has a fixed size and a background color. Within it is another div which starts off hidden but is shown with javascript in certain circumstances.

How can I make it so when div.two is shown, you can see its background color and the text doesn’t wrap? Basically I want it to behave like it doesn’t have a containing div with a fixed size. Is this possible? Thanks

<div class="one">
  <div class="two">
    Some Text
  </div>
</div>

.one {
  width: 20px;
  height: 20px;
  background-color: white;
}
.two {
  background-color: grey;
  display: none;
}

Answer 1

Demo

.two {
    display: inline-block;
    background-color: grey;
    white-space:nowrap;

}