[SOLVED] Align table content to match Arabic contact

Align table content to match Arabic contact

I need to align the table content to match the Arabic contact and for the row to begin on the right side of the page. I managed to align the image to the left side but the company information itself won't be aligned to the right. the text itself is aligned to the right but the whole is at the most left side next to the image.

.companyInfo
{
  background-color: red;
}

.companyLogo
{
  background-color: yellow;
}

<body>
  <table dir="rtl">
    <tr height="100px">
      <td class="companyInfo">
              اسم الشركه
      </td> 
      <td  class="companyLogo">
        <img src="https://internetmarketingteam.com/wp-content/uploads/2017/05/url-web-address-300x300.png" />
      </td>
    </tr>
  </table>
</body>

I tried to have each os col-span=4, tried to give them width of 50% each but none of these are working

Solution

You seem to be using a table for layout purposes. That would be a misuse of the table element and makes it more difficult to achieve your goal.

Here's my best guess at what you're after using flexbox, a modern layout feature.

.flexRow {
  display: flex; /* row by default */
}

.companyInfo {
  background-color: red;
  flex: auto; /* take up extra width */
  justify-content: start; /* row axis */
  align-items: center; /* cross axis */
}

.companyLogo {
  background-color: yellow;
}

<body>
  <div dir="rtl" class="flexRow">
    <div class="companyInfo flexRow">
      اسم الشركه
    </div>
    <div class="companyLogo">
      <img src="https://internetmarketingteam.com/wp-content/uploads/2017/05/url-web-address-300x300.png" />
    </div>
  </div>
</body>