<!DOCTYPE html>
<html>
<!--
 | Content alignment should be based on the start edge of the line when the
 | inline-level boxes overflow.
 |   https://www.w3.org/TR/css-text/#text-align
 -->
<head>
  <style>
    body {
      margin: 0px 0px 0px 100px;
      font-family: Roboto;
      width: 200px;
      font-size: 15px;
      color: #999;
    }

    div.bluebg {
      background: #2020F0;
    }
    div.greybg {
      background: #B0B0B0;
    }

    div.container {
      background: #999;
      width: 10px;
    }

    div.left {
      text-align: left;
    }
    div.center {
      text-align: center;
    }
    div.right {
      text-align: right;
    }
  </style>
</head>
<body>
  <div dir="ltr" class="container left">
    <div class="bluebg">a loooooong child</div>
  </div>

  <div dir="ltr" class="container center">
    <div class="greybg">a loooooong child</div>
  </div>

  <div dir="ltr" class="container right">
    <div class="bluebg">a loooooong child</div>
  </div>

  <div dir="rtl" class="container left">
    <div class="bluebg">a loooooong child</div>
  </div>

  <div dir="rtl" class="container center">
    <div class="greybg">a loooooong child</div>
  </div>

  <div dir="rtl" class="container right">
    <div class="bluebg">a loooooong child</div>
  </div>
</body>
</html>