Expand <div> Element to Width of screen

Question

I have (2) div elements displayed as inline-block's.

I'm attempting to make the second div container that is wrapped around a <p> element extend to the width of the screen. Not sure how to accomplish this.

Ideally, the red container will stretch to the edge of the screen to the right.

<div style="background-color: grey; width:16px; display: inline-block;">
  <p>-</p>
</div>
<div style="background-color: red; display: inline-block;">
  <p>Test Text</p>
</div>

Answer 1

If you want to keep your element as display: inline-block, you can make use of calculation-driven variables, and set the second div to occupy 100% of the width of the container minus the width of the first element (and margins):

:root {
  --left-width: 16px;
}

div:nth-of-type(1) {
  display: inline-block;
  background-color: grey;
  width: var(--left-width);
}

div:nth-of-type(2) {
  display: inline-block;
  background-color: red;
  width: calc(100% - var(--left-width) - 4px);
}

<div>
  <p>-</p>
</div>
<div>
  <p>Test Text</p>
</div>