Last row remaining space

Make Last row take remaining space

by Saksham Malhotra

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row no-gutters">
    <div class="control col-6 col-lg-6">first control</div>
    <div class="control col-6 col-lg-6">second control</div>
    <div class="control col-6 col-lg-6">third control</div>
    <div class="actions flex-grow-1"><span class="action one">first action</span><span class="action one">first action</span><span class="action two">second action</span></div>
  </div>
</div>

CSS

.container {
  display: flex;
}

.actions {
  text-align: right;
}

.action {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: 3px solid #77787B;

}