Нажмите теги на следующую строку вместо переполнения

Question

У меня есть теги в одной строке с моими кнопками на другом конце строки ... У меня они обернуты вокруг div col-md-6, поэтому я хочу, чтобы он переходил на следующую строку, если он переполняет это

Вот мой код:

<div class="row">
<div class="col-md-6 col-xs-12 overflow-hidden">
    <div class="pull-left">
        <div class="d-flex align-center">
            <b class="inline-block m-10">Testing:</b>
            <span class="tags">Test</span>
            <span class="tags">Test</span>
        </div>
    </div>
        <div class="col-md-6 col-xs-12 overflow-hidden">
        <div class="pull-right">
            <button class="button btn-info m-10">
                Test </button><button class="button btn-clear"> Clear</button>
        </div>
    </div>
</div>

CSS:

.button {
    cursor: pointer;
    border: none;
    border-radius: 3px;
    height: 50px;
    width: 120px;
}

.m-10 {
    margin-left: 10px;
    margin-right: 10px;
}

.tags {
    background-color: #f2f2f2;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    transition: all .3s ease-out;
    margin: 3px 5px 3px 0;
    padding: 2px 15px;
    border-radius: 6px;
    border: 1px solid #c9c9c9;
    display: inline-block;
}

.inline-block {
    display: inline-block;
}

.align-center {
    align-items: center;
}

.pull-left {
    float: left;
}

.flex-end {
    justify-content: flex-end;
}

Демо

https://jsfiddle.net/gxw715nk/

Answer 1

Поплавки давно устарели.Они все еще работают, но лучше использовать flexbox:

.d-flex {
  display: flex;
  flex-wrap: wrap;
}