HTML/Bootstrap Align variable elements in table - html

Question

I'm stuck on a problem here where I need to align two elements (one's a <span> and the other's an <a>) horizontally in a table. The <span> works as an indenter as I'm trying to display a tree in a table. The problem now is that the button (<a>) has a variable length due to its text inside (when you click on the button you can edit the text) and the <span> has a variable length due to the number of parents of the button.
Whenever the text in the button gets too long it breaks into the line below the indenter.
Look at this fiddle:
<table style="width:70%;">
<tr>
<td>
<span class="indenter" style="width:120px;display:inline-block;">
<a>
</a>
</span>
<a href="#" class="btn">
text inside the a tag text inside the a tag
</a>
</td>
</tr>
</table>
I do not know the width of the indenter because it is calculated by some js plugin therefore calculating the width for the <a> tag with css does not work.
Furthermore I need the span to be always exactly the width it has so display: flex doesn't work either.
Do you have an idea on how to
Thank you!

Answer 1

Use display: tabel-cell for button and span
.indenter {
border: 1px solid black;
vertical-align: center;
}
.indenter a:after {
content:"-";
}
.btn {
display: tabel-cell;
color: #eb8b02;
border: 1px solid #ccc;
text-align: center;
padding: 4px 12px;
line-height: 20px;
vertical-align: middle;
cursor: pointer;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
border-radius: 4px;
text-decoration: none;
}
<table style="width:70%;">
<tr>
<td>
<span class="indenter" style="width:120px;display:tabel-cell;">
<a>
</a>
</span>
<a href="#" class="btn">
text inside the a tag text inside the a tag
</a>
</td>
</tr>
</table>