Как отобразить "taginput" по вертикали?

Question

Я использую JQuery «taginput», чтобы пользователь мог создавать теги в поле ввода.

Я бы хотел показывать теги вертикальные, а не встроенные.
Также, когда вы вводите что-то вроде: «1300x1300», кажется, что вход не покрывает 100% ширины.

Как я могу это исправить?

HTML

<table> 
    <tr> 
    <td class="oppningarTd"> 
     <input type="text" class="oppningar" data-role="tagsinput" multiple="true" /> 
    </td> 
    </tr> 
</table> 

CSS

.bootstrap-tagsinput { 
    background-color: #fff; 
    border: 1px; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    color: #555; 
    vertical-align: middle; 
    width: 100%; 
    cursor: text; 
    white-space: pre; //Just trying something 
} 

td.oppningarTd { 
    border: 1px solid black; 
    background: white; 
    text-align: center; 
    width: 200px !important; 
} 

input.oppningar { 
    width: 100% !important; 
    text-align: center; 
} 

FIDDLE
https://jsfiddle.net/Lh4jy9d4/151/

Answer 1

Благодаря @ комментарий CBroe, я был успешным для тя nge CSS плагина.

.bootstrap-tagsinput { 
    background-color: white; 
    border: 0px; 
    width: 100%; 
    cursor: text; 
} 
.bootstrap-tagsinput input { 
    border: none; 
    box-shadow: none; 
    outline: none; 
    background-color: transparent; 
    padding: 0; 
    margin: 0; 
} 
.bootstrap-tagsinput.form-control input::-moz-placeholder { 
    color: #777; 
    opacity: 1; 
} 
.bootstrap-tagsinput.form-control input:-ms-input-placeholder { 
    color: #777; 
} 
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder { 
    color: #777; 
} 
.bootstrap-tagsinput input:focus { 
    border: none; 
    box-shadow: none; 
} 
.bootstrap-tagsinput .tag { 
    margin: 4px; 
    color: white; 
    display: block; 
} 
.bootstrap-tagsinput .tag [data-role="remove"] { 
    float: right; 
    cursor: pointer; 
    color: red; 
} 
.bootstrap-tagsinput .tag [data-role="remove"]:after { 
    content: "x"; 
    padding: 0px 2px; 
} 
.bootstrap-tagsinput .tag [data-role="remove"]:hover { 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
} 
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active { 
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 
}