title: How to align checkbox long label?
body: <p>I am having checkboxes with label and the normal labels are displayed as expected and no issues with it.</p>
  <p><strong>Current scenario:</strong>
  But when I give long label then the text goes to next line and starts under checkbox.</p>
  <p><strong>Working Snippet:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.checkbox input {
      display: none;
  }
  
  .checkbox__input {
      width: 1pc;
      height: 1pc;
      display: inline-block;
      position: relative;
      box-shadow: inset 0 0 0 0 #049fd9;
      border: 1px ridge #049fd9;
  }
  
  input:checked~.checkbox__label {
    font-weight: 400;
      font-size: 9pt;
      font-family: Regular;
      display: inline;
      position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label class="checkbox"&gt;
  &lt;input type="checkbox" /&gt;
  &lt;span class="checkbox__input"&gt;&lt;/span&gt;
  &lt;span class="checkbox__label"&gt;Checkbox One&lt;/span&gt;
  &lt;/label&gt;
  &lt;br /&gt;
  
  &lt;label class="checkbox"&gt;
  &lt;input type="checkbox" /&gt;
  &lt;span class="checkbox__input"&gt;&lt;/span&gt;
  &lt;span class="checkbox__label"&gt;Checkbox Two&lt;/span&gt;
  &lt;/label&gt;
  &lt;br /&gt;
  
  &lt;label class="checkbox"&gt;
  &lt;input type="checkbox" /&gt;
  &lt;span class="checkbox__input"&gt;&lt;/span&gt;
  &lt;span class="checkbox__label"&gt;Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action.&lt;/span&gt;
    &lt;label&gt;
  &lt;br /&gt;
  
  &lt;label class="checkbox"&gt;
  &lt;input type="checkbox" /&gt;
  &lt;span class="checkbox__input"&gt;&lt;/span&gt;
  &lt;span class="checkbox__label"&gt;Checkbox Four&lt;/span&gt;
  &lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Expected Result:</strong></p>
  <p>-&gt; For long label, when label goes to next line then it should start from the start of the previous line.</p>
  <pre><code>***Checkbox*** Label text needs to be really really long to show this in action. Label text needs to be really 
                 really long to show this in action. Label text needs to be really really long to show this in 
                 action. 
  </code></pre>
  <p><strong>Things I have tried:</strong></p>
  <pre><code>input:checked~.checkbox__label {
     display: flex;
     flex-wrap: wrap
  }
  </code></pre>
  <p>And the above one doesn't work..</p>
  <p>And this is a dynamically generated checkboxes so I cannot change the css style for long text label alone.. It needs to be in common and resolve the issue of long text in general. Also please don't modify the class and elements given.. I need to achieve the result by modifying only the css properties..</p>
  <p>Any good help would be greatly appreaciated. Thanks..</p>