убедитесь, что две строки в моей таблице bootstrap всегда расположены рядом, независимо от длины текста

Question

У меня есть панель Bootstrap с текстом внутри таблицы. Одна сторона текста - это ссылки, а другая - описания. Что я заметил, так это то, что мне иногда приходится подделывать длину текста, чтобы текст появлялся рядом со ссылкой / описанием.
Как эффективно настроить эти строки, чтобы текст всегда был рядом с обозначенная ссылка или описание независимо от длины текста? Мне нужно, чтобы он был достаточно гибким, чтобы отображаться в одной строке, но, очевидно, в другой строке

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
  <div class="panel panel-primary">
<div class="panel-heading">
  <h4>Plan</h4>
</div>
<table class="table">
  <thead>
    <tr>
      <th>Set project strategy, tactics and timing</th>
      <th><a href="" target="_blank">Project Brief</a></th>
    </tr>
    <tr>
      <th>Choose the right channel for your communication</th>
      <th><a href="" target="_blank">Channel Guidelines</a>	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	</th>
    </tr>
    <tr>
      <th>Add your project to the calendar<br><br></th>
      <th><a href="" target="_blank">Communications Calendar Intake</a> </th>
    </tr>
    <tr>
      <th>Submit outbound call/text programs	</th>
      <th><a href="" target="_blank">website to test</a></th>
    </tr>
    <tr>
      <th>Review vendor guidelines and share communication requirements with vendors</th>
      <th style="margin-left: 100px;"><a href="" target="_blank">Vendor Guidelines</a> 	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;&zwnj; &zwnj;	&zwnj; &zwnj;	&zwnj; &zwnj;</th>
    </tr>
  </thead>
</table>
  </div>
</div>

Answer 1

Подход, который вы использовали, не будет работать на всех разрешениях экрана ... лучше использовать vertical-align:middle;

Я продублировал 2 строки без добавленного вами ‌. .. Они окрашены в зеленый цвет, и здесь я также использовал свойство vertical-align;

рабочий фрагмент ниже:

.table thead td {
  background-color: lightgreen;
  vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h4>Plan</h4>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>Set project strategy, tactics and timing</th>
          <th><a href="" target="_blank">Project Brief</a></th>
        </tr>
        <tr>
          <th>Choose the right channel for your communication</th>
          <th><a href="" target="_blank">Channel Guidelines</a> &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;&zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;&zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; </th>
        </tr>
        <tr>
          <th>Choose the right channel for your communication</th>
          <td><a href="" target="_blank">Channel Guidelines</a>
          </td>
        </tr>
        <tr>
          <th>Add your project to the calendar<br><br></th>
          <th><a href="" target="_blank">Communications Calendar Intake</a> </th>
        </tr>
        <tr>
          <th>Submit outbound call/text programs </th>
          <th><a href="" target="_blank">website to test</a></th>
        </tr>
        <tr>
          <th>Review vendor guidelines and share communication requirements with vendors</th>
          <th style="margin-left: 100px;"><a href="" target="_blank">Vendor Guidelines</a> &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;&zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;&zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;</th>
        </tr>
        <tr>
          <th>Review vendor guidelines and share communication requirements with vendors</th>
          <td style="margin-left: 100px;"><a href="" target="_blank">Vendor Guidelines</a>
          </td>
        </tr>
      </thead>
    </table>
  </div>
</div>