https://i.sstatic.net/ku01T.png
i'm trying to arrange the elements inside the #gameInpBox similar to the image below
body{
margin: 0px;
font-family: 'Signika Negative', sans-serif;
background-color: #252525;
color: #f8f9fa;
}
.dim {
background: rgba(0,0,0, 0.6);
height: 100%;
position: fixed;
width: 100%;
z-index: 30;
display: block;
}
#gameInpBox{
z-index: 31;
height: 40vh;
width: 50vw;
position: absolute;
top: 50%;
left: 50%;
background-color: #adb5bd;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
transform: translate(-50%, -50%);
border-radius: 15px;
}
.form{
}
label{
text-align: left;
}
input{
width: 10vw;
}
select{
width: 8vw;
}
#Add{
backface-visibility: hidden;
font-family: 'Signika Negative', sans-serif;
border: 0;
border-radius: .375rem;
box-sizing: border-box;
color: black;
font-weight: 600;
cursor: pointer;
display: inline-block;
font-size: 2vh;
letter-spacing: -.01em;
line-height: 1.3;
/* padding: 1rem 1.25rem; */
position: absolute;
text-align: center;
text-decoration: none;
transform: translateZ(0) scale(1);
transition: transform .2s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 10vw;
height: 5vh;
right: 2%;
bottom: 1vh;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#cancel{
backface-visibility: hidden;
font-family: 'Signika Negative', sans-serif;
border: 0;
border-radius: .375rem;
box-sizing: border-box;
color: black;
font-weight: 600;
cursor: pointer;
display: inline-block;
font-size: 2vh;
letter-spacing: -.01em;
line-height: 1.3;
/* padding: 1rem 1.25rem; */
position: absolute;
text-align: center;
text-decoration: none;
transform: translateZ(0) scale(1);
transition: transform .2s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 10vw;
height: 5vh;
right: 24%;
bottom: 1vh;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#close{
background: none;
border: none;
font-size: 25px;
position: absolute;
right: 5px;
cursor: pointer;
color: #252525;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Signika+Negative:wght@300&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono&family=Signika+Negative:wght@300&display=swap');
</style>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overwatch Tracker</title>
</head>
<body>
<div class="dim" id="dim">
<div id="gameInpBox">
<button id="close">✖</button>
<div id="inps">
<form class="form">
<label for="dmg">Damage delt:</label><input type="text" id="dmgSEL" name="dmg">
<label for="heal">Healing done:</label><input type="text" id="healSEL" name="heal"><br>
<label for="resault">Resault:</label><select name="resault" id="resaultSEL">
<option value="Win">Win</option>
<option value="Draw">Draw</option>
<option value="Loss">Loss</option>
</select>
<label for="role">Role:</label><select name="role" id="roleSEL">
<option value="DPS">DPS</option>
<option value="Support">Support</option>
<option value="Tank">Tank</option>
</select>
<label for="map">Map:</label><select name="map" id="mapSEL">
<option value="Illios">Illios</option>
<option value="Kings-row">Kings row</option>
<option value="NQS">NQS</option>
</select>
</form>
<button id="cancel">Cancel</button>
<button id="Add">Add</button>
</div>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>