Example row/col issue

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<form>
  <div class="form-row d-flex">
    <div class="col-md-1">
      <input class="form-control">
    </div>
    <div class="col-md-2">
      <input class="form-control">
    </div>
    <div class="col-md-4">
      <input class="form-control">
    </div>
    <div class="col-md-4">
      <input class="form-control">
    </div>
    <div class="col-md-auto">
      <button type="button" class="btn btn-link">X</button>
    </div>
  </div>
</form>

CSS

form {
  padding: 10px;
}