Float icon to the left and not add to text padding via CSS

Question

I have a Bootstrap based app with a table that has 'indented' text in the first column. I would like to add an icon (Fontawsome) to the space in the indent. The icon is dynamic as its only displayed if there is a 'note' for that row. Here is what I want:

Here is what I have so far:

Here is my example code:

https://jsfiddle.net/jasper502/ju8we9b6/11/

I have tried different float, display options and can't seem to figure this out. I am sure it's easy - my CSS skills are pretty basic.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

td,
th {
  border: solid 1px #6c757d;
  padding: 10px;
}

.indent {
  padding-left: 30px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<table>
  <thead>
    <tr>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="indent">Row 1</span>
      </td>
    </tr>
    <tr>
      <td>
        <span><i class="fa fa-comment"></i></span>
        <span class="indent">Row 2</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="indent">Row 2</span>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Updated as per comment:

You could then use absolute position on your icon container. This would not affect the position of its siblings irrespective of the icon's presence or absence.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

td,
th {
  border: solid 1px #6c757d;
  padding: 10px;
}

.indent {
  padding-left: 30px;
}

.dummyIcon{
  position: absolute;
  left:10px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<table>
  <thead>
    <tr>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="indent">Row 1</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="dummyIcon"><i class="fa fa-comment"></i></span>
        <span class="indent">Row 2</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="indent">Row 2</span>
      </td>
    </tr>
  </tbody>
</table>

If you right align your second span containing the row name, it would work fine. The bs4 class that I have used is float-right. Also you would need to fix a width for your td, so if the icon disappears, your column width remains same.

Working snippet below:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

td,
th {
  border: solid 1px #6c757d;
  padding: 10px;
}

.indent {
  padding-left: 30px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<table>
  <thead>
    <tr>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="indent float-right">Row 1</span>
      </td>
    </tr>
    <tr>
      <td>
        <span><i class="fa fa-comment"></i></span>
        <span class="indent float-right">Row 2</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="indent float-right">Row 2</span>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

You need to include the comment icon in every row - hidden by default - and make it appear only when it has the class visible using the following code:

.fa-comment:not(.visible) {
  visibility: hidden;
}

And this is what it will look like:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

td,
th {
  border: solid 1px #6c757d;
  padding: 10px;
}

.indent {
  padding-left: 10px;
}
.fa-comment:not(.visible) {
  visibility: hidden;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<table>
  <thead>
    <tr>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span><i class="fa fa-fw fa-comment"></i></span>
        <span class="indent">Row 1</span>
      </td>
    </tr>
    <tr>
      <td>
        <span><i class="fa fa-fw fa-comment visible"></i></span>
        <span class="indent">Row 2</span>
      </td>
    </tr>
    <tr>
      <td>
        <span><i class="fa fa-fw fa-comment"></i></span>
        <span class="indent">Row 2</span>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

You are using a table instead of flex or so. Why not add the icon in a cell to the left - it will collapse if there is no icon OR you can make the cell width constant like your padding is now

.row {
  background: #f8f9fa;
  margin-top: 20px;
}


tr {
  border: solid 1px #6c757d;
  padding: 10px;
  text-align:right
}

tr th {text-align:center}

td {  padding: 10px; }

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<table>
  <thead>
    <tr>
      <th colspan="2">Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">Row 1</td>
    </tr>
    <tr>
      <td><i class="fa fa-comment"></i></td>
      <td>Row 2</td>
    </tr>
    <tr>
      <td colspan="2">Row 2</td>
    </tr>
  </tbody>
</table>