Grid System in CSS - html

Question

I would like to display 3 white blocks in a blue container. Each with a 10px margin between.
Currently I have this:
<div class="wbg-create">
<div class="full-create">
<div class="white-create">
<br/>
<br/>
<br/>
<br/>
<br/>
<t class="f30 helv grey">Create Group</t>
<br/>
<br/>
<br/>
<t class="f30 helv-b grey">Group Name</t>
<br/>
<br/>
<input class="gen-input helv-b">
<br/>
<br/>
<br/>
<t class="f30 helv-b grey">Array Type</t>
<br/>
<br/>
<select class="gen-input helv txtind-10">
<option>Option 1</option>
<option>Option 2</option>
</select>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<button class="b_next"><b>Next</b></button>
</div>
<div class="white-create" style="margin: 0 auto;"></div>
</div>
</div>
.wbg-create{
position: absolute;
width: 84%;
background-color: #f3fbff;
border-radius: 50px;
height: 98vh;
margin-top: 0px;
text-align: center;
}
.f30{
font-size: 30px;
}
.helv{
font-family: Helvetica Neue;
}
.helv-b{
font-family: Helvetica Neue;
font-weight: bold;
}
.grey{
color: #545454;
}
.gen-input{
background-color: #e3e8ed;
height: 50px;
width: 300px;
border-radius: 30px;
border-color: transparent;
text-align: center;
font-size: 20px;
}
.txtind-10{
text-indent: 10px;
}
.full-create{
margin: 10px;
}
.white-create{
left: 50%;
width: 33%;
background-color: white;
border-radius: 50px;
height: 96vh;
}
.b_next{
border-radius: 50px;
height: 45px;
text-align: center;
width: 100px;
font-size: 20px;
background-color: #cad2e7;
color: #28284c;
border-color: transparent;
bottom: 30px;
}
.b_next:hover{
border-radius: 50px;
height: 45px;
text-align: center;
width: 100px;
font-size: 20px;
background-color: #dde7ff;
color: #4e4e95;
border-color: transparent;
}
.b_next:active{
border-radius: 50px;
height: 45px;
text-align: center;
width: 100px;
font-size: 20px;
background-color: #ffffff;
color: #30a3f5;
border-color: transparent;
}
I know this is really messy, and I should be using margin and padding instead of <br/> but I find it a very long process. My web-app is only run in full-screen and cannot be resized, so it shouldn't be too much of a problem.
How do I get these containers to appear side-by-side?
Currently, there are side-by-side, but they appear below the previous one.
Like this:
[]-should be here-
[]
[]
How can I fix this?

Answer 1

A dirty hack:
.white-create{display:inline-block;}
Better:
Have a look at Common CSS Flexbox Layout Patterns with Example Code
More infos: MDN flexbox

Answer 2

Using grid.
.wbg-create {
display: grid;
grid-template-columns: repeat(3, 1fr)
grid-gap: 10px;
}
Here's a pen with the working answer.
https://codepen.io/jorgeberen/pen/wvKVBNN
Using flex should do the trick too.
.wbg-create {
display: flex;
}
Because display:flex displays the items within the container by default in a horizontal row, your three white blocks should be displayed side by side. For this case scenario it is simpler than using grid.