Difficulty keeping checkbox's generated by Contact Form 7 inline with their labels

I am designing my website using WordPress and have a Contact Form 7 that is giving me formatting issues. The following code is what I used in the Contact Form 7 plugin:

[checkbox checkbox-584 use_label_element "Competitive Market Analysis (CMA) - For Sale" "Competitive Market Analysis (CMA) - For Rent" "Property Management Agreement Forms" "Request in-home visit" "Request office appointment"]

... and it generates the following HTML on my site:

<span class="wpcf7-list-item first">
  <label>
    <input type="checkbox" name="checkbox-584[]" value="Competitive Market Analysis (CMA) - For Sale">
    <span class="wpcf7-list-item-label">Competitive Market Analysis (CMA) - For Sale</span>
  </label>
</span>

The snippet above repeats for each of my checkbox items.

On both Safari and Chrome for MacOS the checkbox appears "normal" size, but the line wraps before the label is shown. On my iPad with Safari the checkbox is much taller than it should be.

What I'm really trying to accomplish here is keeping the label on the same line next to the checkbox. I've found very similar problems all over the web and none of the solutions that worked for others seem to work in my case. Adding the CSS line "span.wpcf7-list-item {display:block;}" to my wordpress theme does prevent multiple checkboxes from displaying on the same line, so I know my css is being utilized and I have the right class, but the Safari web inspector indicates the checkbox itself it taking the entire width.

I'm probably doing a horrible job of explaining this. The website in question is bamcisrealty.com/property-management, and here's a screenshot of where the problem seems to be. Any assistance is greatly appreciated, thanks!.

screenshot of safari web inspector results