Tag-it Autocomplete: Make li.tagit-new cover rest of ul.tagit

Question

I tried to get the 'li.tagit-new input' to cover the full width of the rest of the parent ul.tagit with:

ul.tagit li {
    display:table-cell;
    white-space:nowrap;
    vertical-align:top;
    float: none;
}

ul.tagit li.tagit-new {
    width: 100%;
    border: 1px solid #ddd;
}
ul.tagit li.tagit-new input {
    width: 100%;
}

It works fine if there is at least one tag. But not if there no tag:

http://jsfiddle.net/bus9dgx5/

Answer 1

i cant write this as a comment. as i understand ur problem , u can display it with the flex proprety

ul.tagit {
  margin-bottom: 0px;
  display: flex;
} 

here is a demo

http://jsfiddle.net/4eusrdbf/1/