How to keep content both in single-line while aligning it to the bottom?

Question

I'm trying to get to this state:

Right to left text aligned on the right side, left to right text aligned on the left side, while staying at the bottom. Instead I get this:

If I try to use a relative-absolute solution, I ruin the single-line alignment of the left block content. Here is the HTML:

(btw: I'm using table because of its neatness, I'm open to non-table solutions...)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>

      <link rel="stylesheet" type="text/css" href="main.css"/>
  </head>
  <body dir="rtl">
    <table>
        <tr>
            <td><h1>מימין לשמאל</h1></td>
            <td class="ltr same-line-container">
                <span>left to right text</span>
                <span style="border:1px solid black; margin-right: 2.5px;"/>
                <span>123456789</span>
            </td>
        </tr>
    </table>
    <hr>
    </div>
  </body>
</html>

CSS:

table{ width: 100%; }
td { border: 0.5px solid red; }
div{ border: 0.5px solid blue; }
span{ border: 0.5px solid cyan; }

.same-line-container span {
    display:inline;
}

.bottom-content-container {
    position:relative;
}

.bottom-content-container span {
    position:absolute;
}

.rtl { direction: rtl; }
.ltr { direction: ltr; }
.right{ float: right; }
.left{ float: left; }

I'm starting to wander whether I have to add JS as well to overcome such issues...

score 2 · Accepted Answer · answered May 16 '16 at 14:11

Use vertical-align:bottom; on the td with the class same-line-container. The default is vertical-align:middle; which is why the text is not positioned to the bottom of the container.

table{ width: 100%; }
td { border: 0.5px solid red; }
div{ border: 0.5px solid blue; }
span{ border: 0.5px solid cyan; }
.same-line-container {
  vertical-align:bottom;
  }
.same-line-container span {
    display:inline;
}

.bottom-content-container {
    position:relative;
}

.bottom-content-container span {
    position:absolute;
}

.rtl { direction: rtl; }
.ltr { direction: ltr; }
.right{ float: right; }
.left{ float: left; }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>

      <link rel="stylesheet" type="text/css" href="main.css"/>
  </head>
  <body dir="rtl">
    <table>
        <tr>
            <td><h1>מימין לשמאל</h1></td>
            <td class="ltr same-line-container">
                <span>left to right text</span>
                <span style="border:1px solid black; margin-right: 2.5px;"/>
                <span>123456789</span>
            </td>
        </tr>
    </table>
    <hr>
    </div>
  </body>
</html>

I would personally use divs but if you like tables then go for it! Could you accept if you feel like this answers your question? — Wowsk, May 16 '16 at 15:04

How to keep content both in single-line while aligning it to the bottom?

1 Answers1