Long inline labels in forms

by Banandrew

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>
<form class="ui form">
  <div class="ui middle aligned grid">
    <div class="six wide right aligned column">
      <div class="inline required field">
        <label>Resize the window</label>
      </div>
    </div>
    <div class="ten wide column">
      <div class="field">
        <input type="text">
      </div>
    </div>
    <div class="six wide right aligned column">
      <div class="inline field">
        <label>This is a very long label that should look weird, but I think it turned out okay in the end, so let’s make it long enough to have 3 lines of text</label>
      </div>
    </div>
    <div class="ten wide column">
      <div class="field">
        <input type="text">
      </div>
    </div>
  </div>
</form>

CSS

body {
    padding: 1em;
}

JavaScript

// Add javascript here