Expand <div> Element to Width of screen

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>

Solution

You want the second block to behave like a display: block (taking up as much width as possible) while keeping the first block as a display: inline-block.

Thus, in this case, you need a float: left, not display: inline-block.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="background-color: grey; width:16px; float:left">
        <p>-</p>
    </div>
    <div style="background-color: red;">
        <p>Test Text</p>
    </div>
</body>
</html>

Note: a more modern way of doing this is using display: flex.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="display: flex;">
      <div style="background-color: grey; width:16px;">
          <p>-</p>
      </div>
      <div style="background-color: red; flex: 1;">
          <p>Test Text</p>
      </div>
    </div>
</body>
</html>