Headings and content in separate columns

Question

I have a design where title goes on the left, and paragraphs go on the right like below.

I can easily accomplish this with Bootstrap columns, but would this be semantically correct? (i.e. having heading vs related content in different divs)? Would it be bad for WCAG 2.0 standards? From what I have read on w3.org, information on this is a bit dubious.

Example HTML:

<div class="row">
    <div class="col"><h2>Section 1 Title</h2></div>
    <div class="col">
        <p>Seciton 1 paragraph 1</p>
        <p>Seciton 1 paragraph 2</p>
    </div>
</div>
<div class="row">
    <div class="col"><h2>Section 2 Title</h2></div>
    <div class="col">
        <p>Seciton 2 paragraph 1</p>
        <p>Seciton 2 paragraph 2</p>
    </div>
</div>

Answer 1

Can you post the HTML and CSS? A quick answer is no. Unless your doing something crazy like still using tables to format your layouts its most likely not an issue. My assumption is the heading and corresponding paragraph are in a container and floated using CSS? If so then that would pass WCAG 2.0 standards. But without your code I cant give you a definite answer.