: I suggest you try using columns as follows with a media query to help avoid narrow screens displaying the columns if they will not work properly. It is coded for Chrome and Safari (-webkit)

@Karen161

I suggest you try using columns as follows with a media query to help avoid narrow screens displaying the columns if they will not work properly. It is coded for Chrome and Safari (-webkit) as well as for Firefox (-moz). You can change the column count and column gap to suit your needs. I find it to be quite reliable.
@media only screen and ( min-width: 1200px ) {
.two-col {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 1.5rem;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem
}
}


One other item. If you need the columns to align at the top regardless of whether one ends up with 12 lines and the other with 11 for example you can add vertical-align: top as well.

Vote Up Vote Down

Login to post a comment!