Уменьшите ширину обернутого текстового блока и выровняйте вертикально по отношению к следующему брату

Question

Возможно ли получить следующее только с CSS?

1. Контейнер имеет фиксированную ширину (скажем, 200 пикселей),
2. Текстовый блок следует переносить только при необходимости,
3. Оба Текстовый блок и Метка запроса выровнена по вертикали, даже когда текст переносится,
4. Текстовый блок занимает только необходимую ширину (по умолчанию, когда происходит перенос, блок занимает всю ширину),
5. Метка Query следует сразу ( не выравнивать по правому краю)

В приведенном ниже примере строки 1 и 3 в порядке, текст в строке 2 не следует переносить, если он не требуется подгонять (это вызвано width: 1px Обходной путь)

Может быть, вы знаете готовые решения для требуемого макета?

JsFiddle

.tbl {
  border-collapse: collapse;
  margin: 1em;
}

.cell {
  border: 1px solid #eee;
  padding: .2em;
}

/* set the container width explicitly */
.cell:nth-of-type(2) {
  width: 200px;
}

.wrap {
  padding: .2em;
  /* the following aligns both child vertically */
  display: flex;
  align-items: center;
}

.text {
  background: #efefef;
  /* the following makes the element to shrink its width */
  display: inline-table;
  width: 1px;
}

.help {
  display: block;
  border-radius: 7px;
  background: #999;
  color: #fff;
  width: 14px;
  height: 14px;
  text-align: center;
  font-size: 14px;
  line-height: 14px;
  cursor: pointer;
  margin: 0 0 0 .2em;
}

.help:after {
  content: '?';
}

<table class="tbl">
  <tr>
    <td class="cell">1</td>
    <td class="cell">
      <div class="wrap">
        <div class="text">Active</div>
        <div class="help" title="Active"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td class="cell">2</td>
    <td class="cell">
      <div class="wrap">
        <div class="text">Is an AVM</div>
        <div class="help" title="Is an AVM"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td class="cell">3</td>
    <td class="cell">
      <div class="wrap">
        <div class="text">Uploadable by CRM/Investigations</div>
        <div class="help" title="Uploadable by CRM/Investigations"></div>
      </div>
    </td>
  </tr>
</table>