Павел migelonio

.services{
    overflow: hidden;
}
.services .services_img {
    position: relative;
    float: left;
    height: 100px;

    margin-right: 50px;
}
.services .services_img:last-child{
    margin-right:0;
}

.services {
    position: relative;
    height: 100px;

    dispaly:flex;
    flex-flow: row wrap;

/* следующие два свойства как раз настраивают нужное вам отображение по горизонтали и вертикали соответственно */
    justify-content: space-between;
    align-items: flex-start;
}

interface IUser {
    name: string;
    role: IRole;
}

type Extractor<T, X> = (entry: T) => X;

const groupBy = <T, X>(
    collection: T[],
    mapper: Extractor<T, X>
): Map<X, T[]> => collection.reduce((accumulator, entry) => {
    const key = mapper(entry);
    if (accumulator.has(key)) {
        accumulator.get(key)!.push(entry);
    
        return accumulator;
    }

    accumulator.set(key, [entry]);

    return accumulator;
}, new Map<X, T[]>());

<input type="number" id="input" />
   <button id="btn">Go</button>

let input = document.querySelector('#input');
  let btn = document.querySelector('#btn');

  btn.addEventListener('click', () => {
  alert(`variable = ${input.value}`);
})