クラス指定のみで横に綺麗に並べる

.side-by-side{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
    --side-by-side-width: auto;
}
.side-by-side.no-justify{
    justify-content: left;
}
.side-by-side:after{
    content:"";
    display:block;
    height:0;
}

.side-by-side.clm5{
    --side-by-side-width: 19%;
}
.side-by-side.clm4{
    --side-by-side-width: 24%;
}
.side-by-side.clm3{
    --side-by-side-width: 32%;
}
.side-by-side.clm2{
    --side-by-side-width: 48%;
}
.side-by-side > .clmItem{
    width: var(--side-by-side-width);
    float:left;
}
.side-by-side:after{
    width: var(--side-by-side-width);
}
/* width: 100%;で残りスペースを埋める */
.side-by-side > .clmItem.spacer {
    width: 100% !important;
}

/* ulに適用した場合 */
ul.side-by-side > li{
    margin: 5px;
}