css-display

Example for display in the CSS.

by Jason Park

HTML

<body style="margin: 0; padding: 0">
  <div style="background-color: lightgreen;">
    <div style="display: inline-block; background-color: grey; width: 20%">
      <div>
        TITLE
      </div>
    </div><!--
    --><div style="display: inline-block; text-align: center; background-color: magenta; width: 80%">
      <div style="display: inline; background-color: skyblue">
        TEST-1
      </div>
      <div style="display: inline; background-color: orange">
        TEST-2
      </div>  
    </div>
  </div>
  
  <br>
  
  <div style="display: flex; flex-direction: row; background-color: lightgreen">
    <div style="background-color: grey; flex: 1">
      TITLE
    </div>
    <div style="background-color: skyblue; flex: 3; text-align: center">
      TEST-1
    </div>
    <div style="background-color: orange; flex: 1">
      TEST-2
    </div>
  </div>
</body>