Cannot use flex or any fancy css since this is a email HTML. I am trying to wrap up some content with a div that have a border bottom, but the border need to be on the last line of the content , like the code I put together so far.
The problem is that I have more than one wrap that need to be look the same, so is messy if I set the heigh for each, plus needed to be mobile friendly.
<table>
<tr>
<td width="400" style="padding:0px 0 8px 0;font-size:17px;line-height:26px;font-weight:300;color:#4d4d4d;font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;">
<div style="border-bottom:1px dotted #333;display:inline-block;height: 45px;"> <!--Instead of putting a set height, I want to put 50%-->
<a class="textlink" href="https://info.bio-rad.com/PIF-Webinar-2021.html" target="_blank" style="text-decoration:none;color:#D1460A;font-weight:300;font-size:17px;line-height:30px;font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;background-color:#ffffff;">Some text content example Some text content Some text content ▸ </a>
</div>
</td>
</tr>
</table>With td you can add height:0 and be able to use percentage with a child element
<table>
<tr>
<td width="400" style="padding:0px 0 8px 0;font-size:17px;line-height:26px;font-weight:300;color:#4d4d4d;font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;height:0;">
<div style="border-bottom:1px dotted #333;display:inline-block;height: calc(100% - 15px);">
<!--Instead of putting a set height, I want to put 50%-->
<a class="textlink" href="https://info.bio-rad.com/PIF-Webinar-2021.html" target="_blank" style="text-decoration:none;color:#D1460A;font-weight:300;font-size:17px;line-height:30px;font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;background-color:#ffffff;">Some text content example Some text content Some text content ▸ </a>
</div>
</td>
</tr>
</table>