Bullet list is uneven with css property/value columns: 2;

Question

I have a bulleted list that I have divided into two columns using:

However, the columns do not appear to start at the same height (see attached image with red line drawn at the top). Is there a better way to split the list into two columns than above?

 .hand-bullet-list ul{ list-style-type: none; margin-left: 0px; } .hand-bullet-list ul li{ list-style: none; position: relative; padding: 0 0 22px 40px; margin-bottom: 20px; } .hand-bullet-list ul li::before{ background: url(https://jeremybullocksafeschools.com/wp-content/uploads/3.png) no-repeat; content: ""; width: 40px; height: 42px; position: absolute; left: 0px; top: 0px; } .hand-bullet-list.bullet-list-two-columns ul, .hand-bullet-list.bullet-list-two-columns ul{ columns: 2; } 

 <div class="hand-bullet-list bullet-list-two-columns"><div class="vc_column-inner vc_custom_1552327659243"><div class="wpb_wrapper"> <div class="wpb_text_column "> <div class="wpb_wrapper"> <ul> <li>Exhibitors must <a href="https://jeremybullocksafeschools.com/register/">complete the online registration form</a>.</li> <li>Exhibitor materials can be shipped to the Copper King Hotel for arrival no later than Monday, August 19th (see contract for details).</li> <li>Exhibit registration and set-up will occur on Monday, August 19th after 6:00 pm at the Copper King Hotel.</li> <li>Company representatives must be present at the booth during all hours when exhibits are open to the public.</li> <li>Exhibits must be dismantled and removed by 3:00 pm on Wednesday, August 21st.</li> <li>Please provide a 200-word summary of your company for inclusion in the Summit's WEB materials and your company will be listed in the official Summit program. Announcements concerning the importance of the exhibits will be made during the program.</li> <li>Standards for exhibiting are provided in the Exhibitor Contract.</li> </ul> </div> </div> </div> 

I would like the two columns aligned at the top.

Answer 1

To split your content into two columns the overall height of ul is taken and then divided by 2 resulting in some of the bottom padding being transferred over to the right column (on some resolutions you can even see the bottom bit of the palm image cropped peeking at the very top of your right column).

To prevent it, you should avoid breaking inside of the children elements by changing your li css to the following:

.hand-bullet-list ul li{
    list-style: none;
    position: relative;
    padding: 0 0 22px 40px;
    margin-bottom: 20px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}