<p>Пример 1 (как хочется реализовать, но без фиксированной ширины контейнера):</p>
<div class="group">
  <div class="group__row row" style="display: inline-flex; width: 133px;">
    <div class="group__col group__col_1 col-auto">col 1</div>
    <div class="group__col group__col_2 col-auto">col 222</div>
    <div class="group__col group__col_3 col-12">col 333333</div>
  </div>
</div>

<p>Пример 2:</p>
<div class="group">
  <div class="group__row row" style="display: inline-flex;">
    <div class="group__col group__col_1 col-auto">col 1</div>
    <div class="group__col group__col_2 col-auto">col 222</div>
    <div class="w-100"></div>
    <div class="group__col group__col_3 col">col 333333</div>
  </div>
</div>

<p>Пример 3:</p>
<div class="group">
  <div class="group__row row" style="display: inline-flex;">
    <div class="group__col group__col_1 col-auto">col 1</div>
    <div class="group__col group__col_2 col-auto">col 222</div>
    <div class="w-100"></div>
    <div class="group__col group__col_3 col-12">col 333333</div>
  </div>
</div>

<p>Пример 4:</p>
<div class="group">
  <div class="group__row row" style="display: inline-flex;">
    <div class="group__col group__col_1 col-auto">col 1</div>
    <div class="group__col group__col_2 col-auto">col 222</div>
    <div class="group__col group__col_3 col-12">col 333333</div>
  </div>
</div>

.group { margin-bottom: 20px; }
.group__row { background: green; }
.group__col_1 { background: violet; }
.group__col_2 { background: aqua; }
.group__col_3 { background: crimson; }