How do i wrap the buttons? - html

Question

Here is how my code currently renders, but I want it to look like this
* {
box-sizing: border-box;
}
body {
background: rgb(75, 109, 221);
color: black;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div {
display: flex;
justify-content: center;
position: relative;
top: 100px;
}
button {
height: 100px;
width: 150px;
background-color: white;
font-size: large;
}
<div className="Home">
<button class="donate-blood-button">Donate Blood</button>
<button class="request-blood-button">Request Blood</button>
</div>

Answer 1

You can do this using flex-direction: column, which basically flips the uses of justify-content and align-items. Then, set align-items: center and justify-content: space-between and set a height for the container (I used 300px).
* {
box-sizing: border-box;
}
body {
background: rgb(75, 109, 221);
color: black;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
top: 100px;
height: 300px;
}
button {
height: 100px;
width: 150px;
background-color: white;
font-size: large;
}
<div className="Home">
<button class="donate-blood-button">Donate Blood</button>
<button class="request-blood-button">Request Blood</button>
</div>
Any time you need help with display: flex;, you should test your ideas on the Yoga Layout Playground. It's an extremely powerful tool for positioning elements.

Answer 2

.Home
{
display: inline;
}
.Home
{
display: inline;
}
<div class="Home">
<button class="donate-blood-button">Donate Blood</button>
<button class="request-blood-button">Request Blood</button>
</div>

Answer 3

* {
box-sizing: border-box;
}
body {
background: rgb(75, 109, 221);
color: black;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.Home {
margin:13% 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.Home > button {
height: 100px;
width: 150px;
background-color: white;
font-size: large;
margin:50px 0;
}
<div class="Home">
<button class="donate-blood-button">Donate Blood</button>
<button class="request-blood-button">Request Blood</button>
</div>