So here we go to achieve this, you have to remove this piece of code from your styles:
.form-inline {
flex-direction: column;
}
Why though?
Because flex-direction: column; will make every one of your div children as an independent row, and whole of them as a column. Like the one, you achieved earlier.
Then the next step to achieve and inline form inputs and buttons here is to move your button tag out of the independent division with the same class and wrap all of them into a single div just like this:
<div class="form-inline">
<input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
<button class="btn btn-primary" type="submit">Subscribe</button>
</div>
The final cut
At the end all of your code will be something like the below snippet:
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>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2>
<p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </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="Il tuo nome..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
<button class="btn btn-primary" type="submit">Subscribe </button>
</div>
</form>
</div>
</div>
</body>
</html>
UPDATE
So to make space between these inputs you should add margin property to each of div children, just like below:
.form-inline input, .form-inline button {
margin: 0 5px;
}
Then the final output will be like this:
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>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2>
<p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </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="Il tuo nome..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
<button class="btn btn-primary" type="submit">Subscribe </button>
</div>
</form>
</div>
</div>
</body>
</html>
NOTE: The property margin is shorthanded for margin: /*margin-top margin-right margin-bottom margin-left*/ so if you use it like this: margin: 0 5px the top and bottom margins will be 0 and the right and left margins will be 5px.
