Align Text Left and Right Inline (iText7.Html2pdf)

Question

I have some HTML code where I align two spans left and right and this appears properly in the browser with the HTML code but after compiling with iText7 to PDF, the left-aligned text is gone and in its place is the right aligned text (see image 1 and image 2, respectively).

image 1 (HTML):

image 2 (PDF):

This is the code I have for my HTML:

<li id="row1">
    <span class="left bold">left-aligned text</span>
    <span class="right bold">right-aligned text</span>
</li>

CSS:

#row1 {
  position:relative;
  max-width: 6.8in;
}

.left {
  position: absolute;
}

.right {
  position: absolute;
  right: 0;
}

I know iText7 is a little finicky with CSS but I figure there is either a way to simply use this basic CSS functionality or a way to trick/work around iText7 to render it as intended.

Answer 1

Try to use float CSS property to place elements on the left or the right.

So here's your code:

#row1 {
    position: relative;
    max-width: 6.8in;
}

.left {
    float: left;
}

.right {
    float: right;
}

<li id="row1">
    <span class="left bold">left-aligned text</span>
    <span class="right bold">right-aligned text</span>
</li>