How to position the div at the bottom of container?

This was a question I was asked at a recent interview.

Position Div at Bottom of Container

You can see we need to position the two squares inside a container. One on the top left corner and one on the bottom right corner.

You can break down the above image into three div. A container div and two square div. Let’s first write the HTML first.

<div class="container">
    <div class="square square-color--red">
    </div>
    <div class="square squaree-color-blue">
    </div>
</div>

For this to work, you need to position the two squares absolute to the container div.

Let’s write the CSS classes.

    .container {
      height: 200px;
      width: 200px;
      position: relative;
      border: 1px solid gray;
    }

    .square{
      width: 40px;
      height: 40px;
      position: absolute;
    }

    .square-color--red {
      background-color: red;
      left: 10px;
      top: 10px;
    }

    .square-color-blue {
      background-color: blue;
      right: 10px;
      bottom: 10px;
    }