Responsive bullet list in a grid

I am trying to achieve something like this:

✓ GREAT BENEFIT OF THE PRODUCT             ✓ BENEFIT OF THE PRODUCT
  Explanation of the benefit.                 Explanation of the benefit
                                              that is quite long, long, 
                                              long, long, long, long, long,
                                              long, long, long, long.         

✓ ANOTHER AMAZING BENEFIT OF THE PRODUCT   ✓ AMAZING BENEFIT OF THE PRODUCT
  Explanation of the benefit.                 Explanation of the benefit

(This is for a regularly-sized display, on a smaller display, these should be simply in one column below each other. )

I would imagine the html part could look like this:

<html>
   <body>
      <div class="item">
         <div class="benefit-title">Great benefit of the product</div>
         <div class="benefit-expl">Explanation of the benefit.</div>
      </div>
      <div class="item">
         <div class="benefit-title">Another amazing benefit of the product</div>
         <div class="benefit-expl">Explanation of the benefit.</div>
      </div>
      <div class="item">
         <div class="benefit-title">Benefit of the product</div>
         <div class="benefit-expl">Explanation of the benefit that is quite long, long, long, long.</div>
      </div>
      <div class="item">
         <div class="benefit-title">Amazing benefit of the product</div>
         <div class="benefit-expl">Explanation of the benefit.</div>
      </div>
   </body>
</html>

But how about the css. I tried list with a custom check marker, but I am not sure how to vertically align the lines in capitals regardless of how long the explanations are.

I was also playing with css grid, but I cannot place the check marker correctly. I think I would need a grid in a grid which as far as I know is not supported yet.

Is there some elegant solution for this that would not involve putting the layout definition into the html (such as using a table). Avoiding absolute positioning would be nice, but not necessary.

Solution

You would only need positioning for a pseudo-element

.wrap {
  display: grid;
  margin: 1em auto;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

.item {
  border: 1px solid grey;
  padding-left: 2em;
}

.benefit-title {
  position: relative;
}

.benefit-title::before {
  content: "X";
  position: absolute;
  left: -1.5em;
}

<div class="wrap">
  <html>

  <body>
    <div class="item">
      <div class="benefit-title">Great benefit of the product</div>
      <div class="benefit-expl">Explanation of the benefit.</div>
    </div>
    <div class="item">
      <div class="benefit-title">Another amazing benefit of the product</div>
      <div class="benefit-expl">Explanation of the benefit.</div>
    </div>
    <div class="item">
      <div class="benefit-title">Benefit of the product</div>
      <div class="benefit-expl">Explanation of the benefit that is quite long, long, long, long.</div>
    </div>
    <div class="item">
      <div class="benefit-title">Amazing benefit of the product</div>
      <div class="benefit-expl">Explanation of the benefit.</div>
    </div>
  </body>

  </html>
</div>