To achieve the desired result, you need to eliminate the following piece of code from your styles:
.form-inline {
flex-direction: column;
}
But why?
The reason is that flex-direction: column; transforms each div child into an independent row, aligning them all in a column format, similar to what was previously achieved.
The next step to create inline form inputs and buttons is by moving the button tag out of the individual division with the same class and enclosing all elements within a single div like this:
<div class="form-inline">
<input class="form-control form-control-sm" type="text" placeholder="Your name..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="Your best email..." required="">
<button class="btn btn-primary" type="submit">Subscribe</button>
</div>
Final steps
Your final code composition will resemble the snippet below:
h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
line-height: 1.5;
padding-top: 0;
margin-top: 0;
color: inherit;
}
.form-inline {
display: flex;
justify-content: center;
align-items: center;
}
.newsletter-subscribe .intro {
font-size: 16px;
max-width: 500px;
margin: 0 auto 25px;
}
.newsletter-subscribe .intro p {
margin-bottom: 35px;
}
.newsletter-subscribe .newsletter-subscribe form .form-control {
background: #eff1f4;
border: none;
border-radius: 3px;
box-shadow: none;
outline: 0;
color: inherit;
text-indent: 9px;
height: 45px;
margin-right: 10px;
min-width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>newsletter</title>
</head>
<body>
<div class="newsletter-subscribe">
<div class="container">
<div class="intro">
<h2 class="text-center"><strong>CAPTURING PHOTOS, CREATING VIDEOS AND TRAVELING WITH THIS PASSION</strong><br></h2>
<p class="text-center">How to capture your best photos, produce videos admired by all, grow on social media working with what you love, and enhancing your skills. </p>
</div>
<form class="form-inline" method="post" action="the link">
<div id="mc_embed_signup_scroll">
<div class="form-inline">
<input class="form-control form-control-sm" type="text" placeholder="Your name..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="Your best email..." required="">
<button class="btn btn-primary" type="submit">Subscribe </button>
</div>
</form>
</div>
</div>
</body>
</html>
UPDATE
To add spacing between these inputs, apply the margin property to each div child as follows:
.form-inline input, .form-inline button {
margin: 0 5px;
}
The final outcome will be:
h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
line-height: 1.5;
padding-top: 0;
margin-top: 0;
color: inherit;
}
.form-inline {
display: flex;
justify-content: center;
align-items: center;
}
.form-inline input, .form-inline button {
margin: 0 5px;
}
.newsletter-subscribe .intro {
font-size: 16px;
max-width: 500px;
margin: 0 auto 25px;
}
.newsletter-subscribe .intro p {
margin-bottom: 35px;
}
.newsletter-subscribe .newsletter-subscribe form .form-control {
background: #eff1f4;
border: none;
border-radius: 3px;
box-shadow: none;
outline: 0;
color: inherit;
text-indent: 9px;
height: 45px;
margin-right: 10px;
min-width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>newsletter</title>
</head>
<body>
<div class="newsletter-subscribe">
<div class="container">
<div class="intro">
<h2 class="text-center"><strong>CAPTURING PHOTOS, CREATING VIDEOS AND TRAVELING WITH THIS PASSION</strong><br></h2>
<p class="text-center">How to capture your best photos, produce videos admired by all, grow on social media working with what you love, and enhancing your skills.</p>;
</div>
<form class="form-inline" method="post" action="the link">
<div id="mc_embed_signup_scroll">
<div class="form-inline">
<input class="form-control form-control-sm" type="text" placeholder="Your name..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="Your best email..." required="">
<button class="btn btn-primary" type="submit">Subscribe </button>
</div>
</form>
</div>
</div>
</body>
</html>
NOTE: The margin property shorthand includes top, right, bottom, and left margins respectively. Using it as margin: 0 5px, sets top and bottom margins to 0 while right and left margins are set to 5px.