How to Create Two Inline-Block Columns With 50% Width

Solutions with CSS properties

It is possible to create two inline-block columns having 50% width. It’s quite easy to do. You need to set the width of both columns to 50%, and set the display to “inline-block”. Note that inline-block elements are sensitive to whitespace in the HTML source, which can cause wrapping. To prevent this, remove the whitespace between the elements or use font-size: 0 on the container.

Example of creating two inline-block columns with 50% width:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .columns {
        font-size: 0;
      }
      .columns div {
        width: 50%;
        display: inline-block;
        font-size: 16px;
      }
      #col1 {
        background-color: #3ad67d;
      }
      #col2 {
        background-color: #d5d6e6;
      }
    </style>
  </head>
  <body>
    <div class="columns">
      <div id="col1">Text 1</div><div id="col2">Text 2</div>
    </div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> XFI2 <div id="col1"> Text 1 </div> <div id="col2">Text 2</div> </div> </div> So, in this way, you can have two columns, both having 50% width and avoid the wrapping of the second column.

Let's see another example, where we use the flex-basis property set to 50%.

Example of creating two columns with 50% width using flexbox:

Example of creating two columns with 50% width using flex and flex-basis

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex {
        display: flex;
      }
      .flex div {
        flex-basis: 50%;
      }
      #col1 {
        background-color: #3ad67d;
      }
      #col2 {
        background-color: #d5d6e6;
      }
    </style>
  </head>
  <body>
    <div class="flex">
      <div id="col1">Text 1</div>
      <div id="col2">Text 2</div>
    </div>
  </body>
</html>

Try it Yourself »