            ========= HTML =========

            <div class="left-box">            
                <ul class="ul-row">
                    <li>Ceron</li>
                    <li>Matthew</li>
                    <li>Calsena</li>
                </ul>  
                <ul class="ul-row">
                    <li><img class="icons" src="image/VS.png" alt=""></li>
                    <li><img class="icons" src="image/vscode-1.png" alt=""></li>
                    <li><img class="icons" src="image/vscode.png" alt=""></li>
                </ul>
                <ul class="ul-row">
                    <li><label for="img">image name</label><img class="icons" src="image/VS.png" alt=""></li>
                    <li><label for="img">image name</label><img class="icons" src="image/vscode-1.png" alt=""></li>
                    <li><label for="img">image name</label><img class="icons" src="image/vscode.png" alt=""></li>
                </ul>            
            </div>

            ========= css =========

            .left-box{
                position: absolute;
                display: list-item;
                float: left;
                left: 20px;
                top: 0;
                width: 15vw;
                height: 100%;    

                /* options */
                /* justify-content: center; 
                text-align:center;
                align-items: center; */
            }

            .ul-row {
                position: relative;
                display: flex;
                float: left;
                left: 0;
                top: 35%; /* option */
                margin: 0;
                padding: 0;
                list-style: none;
                width: 100%; 
            }

            .ul-row li{  
                display: inline;      
                margin: 10px 5px;    
            }
            .ul-row li .icons{
                height: 50px;
                width: 50px;
            }


            ========= JS =========

            ========= HTML =========

            <div class="right-box">
                <h1>UL COLUMN</h1>      
                <ul class="ul-column">
                    <li>Ceron</li>
                    <li>Matthew</li>
                    <li>Calsena</li>
                </ul>  
                <ul class="ul-column">
                    <li><img class="icons" src="image/VS.png" alt=""></li>
                    <li><img class="icons" src="image/vscode-1.png" alt=""></li>
                    <li><img class="icons" src="image/vscode.png" alt=""></li>
                </ul>
                <ul class="ul-column">
                    <li><label for="img">image name</label><img class="icons" src="image/VS.png" alt=""></li>
                    <li><label for="img">image name</label><img class="icons" src="image/vscode-1.png" alt=""></li>
                    <li><label for="img">image name</label><img class="icons" src="image/vscode.png" alt=""></li>
                </ul>            
            </div>

            ========= css =========

            .right-box{
                position: absolute;
                display: list-item;
                float: right;
                top: 0;
                right: 20px;
                border: 1px solid rebeccapurple;
                width: 15vw;
                height: 100%;    

                /* options */
                justify-content: center; 
                text-align:center;
                align-items: center;
            }
            .ul-column{
                position: relative;
                display: block;    
                top: 40px;    
                margin: 0;
                padding: 0;
                list-style: none;
            }

            .ul-column li{
                margin: 5px 0;
            }

            .ul-column li .icons{    
                height: 50px;
                width: 50px;
            }

            ========= JS =========

UL ROW

UL COLUMN

Ceron
Matthew
Calsena

image name
image name
image name