using css how to display divs in a row like the attached pictures? code example

Example: a div within table behave like table element

#container {
    display: table;
    }

  #row  {
    display: table-row;
    }

  #left, #right, #middle {
    display: table-cell;
    }