aligning elements in same line in lightning component

Question

I am trying to align 2 elements in the same line next to each other, but having hard time. And i know this is kind of a simple question that can be googled. But i simply can't seem to do it.

Here is the code -

<div>
  <c:PF_InputCheckbox id="pf_nhw_contractor_submit_acknowledged" value="{!v.acknowledged}"/>
  I affirm I have read and understand the policy.
</div>

Here is the output -

The component c:PF_InputCheckbox is that checkbox thingy seen here. I want the text right next to it, not below it.

I have tried assigning class slds-show_inline-block to container div, but it still shows the checkbox and the text in two separate lines.

Answer 1

There are several ways of doing this. One of them would be using an slds grid

<div class="slds-grid">
  <div class="slds-col"> Component HERE</div>
  <div class="slds-col"> Text HERE </div>
</div>

would render the following:

you can then chose to align your text to the left, or right, again using slds. I encourage you to read the the SLDS documentation and or to do the SLDS Trailhead Module to expand your knowledge on the subject.

Answer 2

For use cases like this SLDS provides Name => Value pairs, as described here

With just one class (slds-list_horizontal), you can change the layout as needed, so they can be stacked, as you have it right now:

You could also align all of them inline:

Or align Name->Value pairs horizontal as you need it:

Your markup would look like this:

<dl class="slds-list_horizontal slds-wrap">
  <dt class="slds-item_label slds-text-color_weak>I affirm I have read and understand the policy.</dt>
  <dd class="slds-item_detail">
    <c:PF_InputCheckbox id="pf_nhw_contractor_submit_acknowledged" value="{!v.acknowledged}"/>
  </dd>
</dl>