.button-container {
    margin: 0;
    display: grid;
    place-content: center;
    grid-auto-flow: column;
    gap: 40px;
}
.button-arounder {
    --c:  #229091;
    font-size: 20px;
    padding: 10px;
    box-shadow: 0 0 0 .1em inset var(--c); 
    --_g: linear-gradient(var(--c) 0 0) no-repeat;
    background: 
        var(--_g) calc(var(--_p,0%) - 100%) 0%,
        var(--_g) calc(200% - var(--_p,0%)) 0%,
        var(--_g) calc(var(--_p,0%) - 100%) 100%,
        var(--_g) calc(200% - var(--_p,0%)) 100%;
    background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
    outline-offset: .1em;
    transition: background-size .4s, background-position 0s .4s;
}
.button-arounder:hover {
    --_p: 100%;
    transition: background-position .4s, background-size 0s;
}
.button-arounder:active {
    box-shadow: 0 0 9e9q inset #0009; 
    background-color: var(--c);
    color: #fff;
}
* {
    box-sizing: border-box;
}
.column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 120px;
    overflow-y: scroll;
    
}
.element_ingroup, .selected_element {
    background: rgb(123, 123, 123);
    border-radius: 7.5px;
    width: 100%;
    text-align: center;
    padding: 2px 3px;
    margin: 3px 0;
    cursor: all-scroll;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}