How to wrap a container element around inline-block children

I have a container around two inline block elements. However the container collapses (the horizontal dashed line). How do I stop it from collapsing so that I can apply a background colour to the container. The structure is important and I want to avoid using flex-box. It is also important that the two coloured squares are right aligned and next to each other.

The aim is to create an absolutley positioned block element over a canvas element. With a descriptive name on the left and two buttons on the right. I have to work with what is there so a solution that involves as little change as possible would be great.

    .header3 {
      width: 300px;
      background-color: lightgray;
      border: 1px dashed grey;
      position:relative;
      
    }
    
    .title3{
      position:absolute;
      top:0px;
      left:0px;
      display:inline-block;
      vertical-align:center;
      background-color:#bada55;
    }
    
    .list {
      list-style:none;
      margin:0px;
      padding:0px;
      border:1px dashed green;
      position:absolute;
      display:inline-block;
      top:0px;
      right:0px; 
    }
    
    .item {
      width: 50px;
      height: 50px;
      display: inline-block;
      text-align: center;
    }
    
    .item-1 {
      background-color: orangered;
    }
    
    .item-2 {
      background-color: skyblue;
    }

    <body>
      <br>
      <div class="header3">
        <div class="title3">bollard name</div>
        <ul class="list">
          <li class="item item-1"></li>
          <li class="item item-2"></li>
        </ul>
      </div>
    </body>

Codepen here

Solution

This is happening because you absolutely positioned your .title3 and .list elements which remove them from the normal flow. If you want to achieve this layout use float:right on your ul and insert a clear in your div (in the code below I achieved this using the::after:pseudo element of yourdiv`)

* {
  font-family: "Helvetica";
}

/* list */

.header3 {
  width: 300px;
  background-color: lightgray;
  border: 1px dashed grey;
  position:relative;

}

.header3::after {
  content: '';
  display: table;
  clear: both;
}

.title3{
  display:inline-block;
  vertical-align:center;
  background-color:#bada55;
}

.list {
  list-style:none;
  margin:0px;
  padding:0px;
  border:1px dashed green;
  float: right;
}

.item {
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
}

.item-1 {
  background-color: orangered;
}

.item-2 {
  background-color: skyblue;
}

<div class="header3">
    <div class="title3">bollard name</div>
    <ul class="list">
      <li class="item item-1"></li>
      <li class="item item-2"></li>
    </ul>
  </div>