title: Semantic UI: How is it possible to left align an action item?
body: <p>I'm trying to add a <em>left aligned</em> <code>button</code> to a <code>Semantic UI</code> <code>modal</code> within the <code>actions</code> region, through using a <code>container</code> element, and I uploaded a sample <a href="https://jsfiddle.net/bdty8xf1/5/" rel="nofollow noreferrer">on jsfiddle</a> in order to give more details about the code:</p>
  
  <pre><code>&lt;div id="modal" class="ui modal"&gt;
    &lt;i class="close icon"&gt;&lt;/i&gt;
    &lt;div class="header"&gt;
      Title
    &lt;/div&gt;
    &lt;div class="actions"&gt;
      &lt;div class="ui left aligned container"&gt;
      &lt;div class="ui button"&gt;
        &lt;i class="eraser icon"&gt;&lt;/i&gt;
          Clear
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui black deny button"&gt;
        Cancel
      &lt;/div&gt;
      &lt;div class="ui approve positive right labeled icon button"&gt;
        Submit
        &lt;i class="checkmark icon"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, the container doesn't well apply the alignment: while the button gets left aligned, it loses its <code>vertical alignment</code> with other <code>action items</code>.</p>
  
  <p>I have not found any method on implementing the alignment, despite having read the Semantic UI documentation.</p>
  
  <p>Any help will be greatly appreciated.</p>