How to align an element to any direction without flex or grid

I used flex in this pen:

But is there a way to align an element with that hierarchy?

Why don’t you want to use flexbox for this? It has good support back to IE11.

You could use the display:table properties to much the same effect.

1 Like

Why don’t you want to use flexbox for this?

I don’t know, really. I feel like I rely too much on grid and flexbox.

You could use the display:table

I tried the table but it didn’t worked.

.box {
  width: 70%;
  display: table;
  i {
   text-align: right;

You don’t have the right structure there which is why I floated the element to the right.

You can’t just use what you feel like :slight_smile:

To use .box as a table element you would need to have two cells inside and then you’d set the inner elements to display:table-cell and then align the content in the second cell to the right. (i.e. Put an element around the word ‘chevron’)

I updated the codepen to add the extra element.


Hi Paul, There’s a typo in this rule

.box i,
.box b {
 display: table-cell;
 vertical-alig: middle;

I noticed when testing with a new line on the <b>

<div class="container">
 <a href="#" class="box">
  <b>Chevron<br>new line</b> <i class="fa fa-chevron-down"></i>

Thanks Ray now updated properly with any luck :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.