I don't know how to resize the left box to be at the width of its placeholder.

Roughly size wise I want it to look something like this:

[![image ex](https://i.stack.imgur.com/wHidy.png)](https://i.stack.imgur.com/wHidy.png)

```css
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
```

```html
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<div class="container">
  <label for="phonNum"> Please enter phone Number</label>
  <div class="row text-left">
    <div class="form-group form-inline" show-errors>
      <div class="col-xs-6">
        <input type="text" class="form-control" maxlength=3 name="phoneInt" placeholder="000" ng-model="client.phoneIn">
      </div>
      <div class="col"></div>
      <input type="text" class="form-control" maxlength=10 name="phone" placeholder="670125" ng-model="client.phone">
    </div>
  </div>

</div>
```