Align a button and input - html

Question

I am new to this, so as practice I tried to create a replica of the Netflix registration page.
I am using the flex box model on the webpage.
I am struggling to get the email input and the get started button to align. I have tried changing the button tag to an anchor tag and go the same result. I have tried using margin and padding on the individual elements and that didn't work.
.landing_page_block {
display: block;
width: 40%;
margin-top: 220px;
text-align: center;
}
.landing_page_h1 {
font-size: 65px;
font-weight: 700;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
}
.landing_page_phrase {
margin: 20px 0 30px 0;
font-weight: 300;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
}
.lp_box1 h5 {
letter-spacing: 1.1px;
font-weight: 300;
margin-bottom: 20px;
}
.lp-box2 {
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.lp_box2 input {
width: 60%;
height: 70px;
border: none;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
font-weight: 300;
padding-left: 15px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
-moz-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
}
.get_started_btn {
height: 70px;
margin-left: -3px;
width: 39%;
font-size: 30px;
border: none;
border-left: 2px solid grey;
font-weight: 300;
color: white;
background-color: red;
text-decoration: none;
}
<div class="landing_page">
<div class="landing_page_block">
<div class="lp_box1">
<h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
<h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
<h6>Ready to watch? Enter your email to create or restart your membership.</h6>
</div>
<div class="lp_box2">
<input type="email" name="email" placeholder="Email address"/>
<button class="get_started_btn">Get Started </button>
</div>
</div>
</div>
The result of my code

Answer 1

I hope that's how you wanted your alignment to be
.landing_page_block {
margin-top: 220px;
text-align: center;
}
.landing_page_h1 {
font-size: 65px;
font-weight: 700;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}
.landing_page_phrase {
font-weight: 300;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}
.lp_box1 h5 {
letter-spacing: 1.1px;
font-weight: 300;
margin-bottom: 20px;
}
.lp_box2 {
display: flex;
align-items: center;
justify-content: space-around;
}
.lp_box2>.input-div{
height: 70px;
width: 62%;
}
.lp_box2>.input-div>input {
height: 70px;
width: 100%;
border: none;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
font-weight: 300;
padding-left: 15px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
-moz-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
}
.get_started_btn {
height: 70px;
width: 30%;
font-size: 30px;
border: none;
border-left: 2px solid grey;
font-weight: 300;
color: white;
background-color: red;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
<div class="landing_page">
<div class="landing_page_block">
<div class="lp_box1">
<h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
<h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
<h6>Ready to watch? Enter your email to create or restart your membership.</h6>
</div>
<div class="lp_box2">
<div class="input-div">
<input type="email" name="email" placeholder="Email address" />
</div>
<div class="get_started_btn">Get Started </div>
</div>
</div>
</div>