// Mixin

​

.two-blocks-by-side(@padding) {

  padding: @padding (@padding + @padding / 2);

  font-size: 0;

  & > div {

    position: relative;

    display: inline-block;

    font-size: initial;

    width: 50%;

    &:first-child { left: -1 * @padding / 2 };

    &:last-child { right: -1 * @padding / 2 };

  }

}

​

// Example style

​

#container {

  .two-blocks-by-side(10px);

  background: red;

  font-size: 0;

  & > div {

    background-color: blue;

    line-height: 50px;

    text-align: center;

    color: white;

  }

}