[Solved] How to create a two columns layout with gap

Question

Css columns sounds like what you’re looking for. You can use the column-rule property for the vertical line.

columns: 2 400px;
column-rule: 1px solid black;

https://css-tricks.com/almanac/properties/c/column-rule/

Please note that the order of your elements will be like a text flow, so:

1 | 4
2 | 5
3 | 6

If that doesn’t work out for you, you could add a right border to your first column and add margin + padding on the right side to space it out evenly. (combined with either display: block; with a float, or a display: inline-block; for displaying the columns next to each other).

Accepted Answer

Css columns sounds like what you’re looking for. You can use the column-rule property for the vertical line.

columns: 2 400px;
column-rule: 1px solid black;

https://css-tricks.com/almanac/properties/c/column-rule/

Please note that the order of your elements will be like a text flow, so:

1 | 4
2 | 5
3 | 6

If that doesn’t work out for you, you could add a right border to your first column and add margin + padding on the right side to space it out evenly. (combined with either display: block; with a float, or a display: inline-block; for displaying the columns next to each other).