<div class = "wrap">
        <div class = "card">
            <div class = "front"> <p id="FrontText">Front</p> </div>
            <div class = "back"> <p id="BackText">Black</p> </div>   
        </div> 
        <div class = "left">
            <div>
                <p>front pic</p> <input type="file" accept="image/*" id="bck_1">
                <p>back pic</p> <input type="file" accept="image/*" id="bck_2">
            </div>
            <div> 
                <p>front text</p> <input type="text" id="front_text_field"> <button onclick="send_front_text()">send</button>
                <p>back text</p> <input type="text" id="back_text_field"> <button onclick="send_back_text()">send</button>
            </div>
            <div>
                <p>цвет спереди(x16 или название)</p> 
                <input type="text" id="ColorTextFront"> 
                <button id = "FrontColorBtn">send</button>
                <p>цвет сзади(x16 или название)</p> 
                <input type="text" id="ColorTextBack"> 
                <button id = "BackColorBtn">send</button>
            </div>
            <div> 
                <p>высота</p> <input type="text" id="HeightField"> <button id="HeightBtn">send</button>
                <p>ширина</p> <input type="text" id="WidthField"> <button id="WidthBtn">send</button>
            </div>
        </div>
    </div>

body {
    font-family: sans-serif;
}

button {
    height: 20px;
    width: 50px;
}

.wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    right: 0;
    top: 0;
    background-color: azure;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    position: relative;
    height: 300px;
    width: 200px;
    border: 1px solid;
}

.front, .back {
    border: 1px solid;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s;
    backface-visibility: hidden;
}

.front{
    color: black;
    background: white;
    background-size: cover;
}

.back{
    background: black;
    color: white;
    background-size: cover; 
    transform: rotateY(180deg);
}

.card:hover .front{
    transform: rotateY(180deg);
}

.card:hover .back{
    transform: rotateY(360deg);
}

.left {
    float: right;
    display: flex;
}