<li class="task-list-item">
  <div style="display: flex; align-items: flex-start;">
    <input type="checkbox">
    <div>
      <p>
        <strong>Social Media Advertising Platforms (e.g., Facebook Ads, Instagram Ads) 
        </strong>
      </p>
      <ul>
        <li class="task-list-item">
          <div style="display: flex; align-items: flex-start;">
            <input type="checkbox">
            <div>
              <strong>Why</strong>: These platforms allow precise targeting based on demographics, interests, and behaviors. You can specifically target sports enthusiasts, bettors, and people interested in AI and analytics. Advanced targeting options and analytics can help refine your campaigns for better ROI and customer acquisition.
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</li>

The original with bullet/numbered points

The current styling with checkboxes

Hi, I’m not sure how to style this properly. I want the input checkboxes to be somewhat similar to a bullet point in the list. The <p> tags have a margin of 1em at the top and bottom, so when I try to do align-items: flex-start on the div containing the input checkbox and the rest of the content, the checkbox goes above the paragraph tag to fill in the space of the margin but I don’t want that.

My .task-list-item removes the list-styles of the bullet/numbered points so I want the input checkbox to act as that stylistically.

I would appreciate any help and guidance on this!

Thanks!