When working with a Bootstrap panel containing text inside a table, I've encountered a challenge. One side features links while the other displays descriptions. At times, I find myself having to artificially lengthen the text to ensure it aligns correctly next to the corresponding link or description.
Is there a more efficient way to set up these rows so that the text always appears beside the designated link or description, irrespective of the text's length? I need a flexible solution that maintains the same line display but moves to a new row when necessary.
<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>‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌</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> ‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌</th>
</tr>
</thead>
</table>
</div>
</div>