How to align this vertically aligned div to the right?

Question

I have a arrangement as follows:

<style>
    .title {
      background: red;
    }
    .outer {
      display: inline-block;
      border: 1px solid red; 
      background: green;
    }
    .inner {
      display: inline-block;
      vertical-align: middle;
    }
    .left {
      background: yellow; 
    }
    .right {
      background: cyan; 
    }
</style>

<div class="outer">
  <div class="title">long title</div>
  <div class="inner left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="inner right">
    <div>1</div>
    <div>2</div>
  </div>
</div>

How can I make the div with the class right to be aligned to the right?

The result can be seen at http://www.cssdesk.com/uCmVL

Edit

The two inner divs need to maintain its vertical alignment. i.e. vertical-align: whatever;

Edit 2

The layout is somewhat complicated, it uses transform to zoom in and zoom out, I tried top: 50%; transform: translateY(-50%); in the inner class but it breaks the calculations to place the SVG PATH elements

Answer 1

You can do a lot with flexbox. Here is an example of the layout you're looking for.

.main-container {
  background-color: #eee;
}
h1 {
  text-align: center;  
}
.columns {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.red {
  background-color: #f00;  
}

.blue {
  background-color: #f99;  
}

<div class="main-container">
  <h1>Title</h1>
  <div class="columns">
    <div class="column red">
      <p>First Row</p>
      <p>Second Row</p>
      <p>Third Row</p>
    </div>
    <div class="column blue">
      <p>Centered First Row</p>
      <p>Centered Second Row</p>
    </div>
  </div>
</div>

Answer 2

Adding a flexbox wrapper element did the trick.

.title {
  background: red;
  text-align: center;
}

.outer {
  display: inline-block;
  border: 1px solid red; 
  background: green;
  min-width: 200px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  background: yellow; 
}

.right {
  background: cyan; 
  text-align: right;  
}

<div class="outer">
  <div class="title">long title</div>
  <div class="wrapper">
    <div class="left">
      <div>1</div>
      <div>22</div>
      <div>333</div>
    </div>
    <div class="right">
      <div>1</div>
      <div>22</div>
    </div>
  </div>
</div>

Answer 3

There's a work around if you have fixed width for the container (.outer), which I noticed in the image posted in the question ALL have same fixed width, if so, then give the .right div a position:relative, and set a left value equals the fixed width of the .outer exactly, then translate its x value by -100%.

jsFiddle

.title {
  background: red;
}
.outer {
  display: inline-block;
  border: 1px solid red;
  background: green;
  width: 70px; /* add this */
}
.inner {
  display: inline-block;
  vertical-align: middle;
}
.left {
  background: yellow;
}
.right {
  background-color: cyan;
  /* and add the below */
  position: relative;
  left: 60px;
  text-align: right;
  transform: translateX(-100%);
}

<div class="outer">
  <div class="title">long title</div>
  <div class="inner left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="inner right">
    <div>1</div>
    <div>22</div>
  </div>
</div>

Answer 4

All of the previous solutions will align it to the right, however they do not keep the vertical align middle. To do that you would either need to switch to using display: table & table-cell or adjust the code be absolutely positioned within a relatively positioned container using top & right margins.

If your table is not going to be dynamic and will have a fixed height, you can use a pixel value for the top positioning, otherwise play with percentages.

http://www.cssdesk.com/H7pxN

.title {
  background: red;
}

.outer {
  position: relative; //
  display: inline-block;
  border: 1px solid red; 
  background: green;
}

.inner {
  display: inline-block;
  vertical-align: middle;
}

.left {
  background: yellow; 
}

.right {
  position: absolute; // 
  right: 0; //
  top: 40%; // 
  background: cyan; 
}

Answer 5

Make your outer div positioned relative and then make the right div go absolute to the right. Like so

.outer {

    position: relative;

    display: inline-block;
    border: 1px solid red; 
    background: green;
}

.right {

    position: absolute;
    right: 0;

    background: cyan; 
}

Answer 6

If it is always going to be hard to the right:

.right {
  background: cyan; 
  float:right;
}