htmlcsssemantic-uisemantic-ui-css

HTML elements not aligned with semantic ui

I am trying to simply show a text input field and a button in one line with semantic ui. For some reason the elements are not aligned properly and I can't figure out the css property that is responsible for this:

<div id="filter-input" class="ui left icon input">
  <i class="search icon"></i>
  <input type="text">
</div>
<div class="ui button">Test</div>

CodePen

Update: Corrected closing tag on last div.

Solution

  • You need to float: left; your input div.

    Just add this lines to your css:

    .input {
  float: left;
  margin-right: 5px;
}

    Or vertical-align your input div:

    .input {
  vertical-align:middle;
}

    Edit: and you have problem with the HTML syntax. change button open tag:

    <button class="ui floating button">Test</button>