unable to move elements in flexbox - css

Question

I'm unable to move the submit button to the left 1vw without disturbing the anchor tags in the right. Also, there's plenty of room in the anchor borders but I can't get the text and image to stay on the same line when decreasing the width of the browser.
UPDATE: was able to keep img and text on same line in anchor by changing anchor display:block to display:inline-flex.
Still unable to move the submit buttom to the right without disturbing the anchor tags
#footer-top{
background-color:white;
padding: 0 2.87rem;
}
h3{
color:#b3d7f8;
font-size: 1.5vw;
padding-top:3vw;
padding-left:2vw;
background-color:#538231;
margin:0
}
#footer-container{
padding: 0 2.87rem;
background-color:white;
}
.myFooter{
background-color:white;
display: flex;
flex-wrap: nowrap;
}
.myFooter .left{
flex: 1 1 auto;
background-color:#538231;
padding-top:3vw;
padding-left:2vw;
padding-bottom:2vw;
}
.myFooter label{
display: block;
color: #c2d59b;
margin-bottom:1vw;
font-size:1vw;
}
.myFooter input{
padding: .5vw .5vw;
}
#email{
height:1vw;
line-height:1;
font-size:1vw;
width:25vw;
}
.submit-button {
background-color: white!important;
border: none!important;
color: black!important;
padding: .5vw .5vw!important;
text-align: center!important;
text-decoration: none!important;
display: inline-block!important;
font-size: 1vw!important;
height:2vw!important;
width:5vw!important;
line-height:1vw!important;
}
.myFooter .right{
flex: 1 1 ;
background-color:#538231;
padding-bottom:2vw;
}
.myFooter .right a{
display: inline-flex;
color: white;
border: 1px solid white;
width: 71%;
margin: 1vw 0;
text-decoration:none;
}
.myFooter .right img{
width: 1.5vw;
height: 100%;
padding: .59vw 0;
display:block;
float:left;
margin:0 1vw;
}
.myFooter .right span{
font-size:1vw;
padding:1vw 0;
display:inline-block;
line-height:1;
}
#media screen and (max-width: 961px) {#footer-top,#footer-container{
padding:0 1.7rem;}
}
<div id ="footer-top">
<h3>Help create a sustainable and healthy town of Weston</h3>
</div>
<div id="footer-container">
<div class="myFooter">
<div class="left">
<form name="message" method="post">
<section>
<label for="email">Join our mailing list:</label><input id="email" type="email" name="email" placeholder="enter email">
<input class="submit-button" type="submit" value="Submit">
</section>
</form>
</div>
<div class="right">
<a href="https://www.facebook.com/groups/1960906387454685">
<img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/facebook-square-brands-green.png">
<span class="foot-txt">Like us on Facebook</span>
</a>
<a href="https://www.instagram.com/sustainablewestonactiongroup/">
<img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/instagram-brands-green.png">
<span class="foot-txt">follow us on Instagram</span>
</a>
<a href="https://twitter.com/Weston_SWAG">
<img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/twitter-square-brands-green.png">
<span class="foot-txt">Retweet us on Twitter</span>
</a>
</div>
</div>
<div>

Answer 1

Since your .left and .right elements have flex-grow: 1 applied (via the flex shorthand) they have expanded across all free space and are touching. So anything that changes the width of one element will impact the other.
First thing I would suggest is to get rid of that rule and instead use justify-content: space-between on the container.
Then, prevent the anchors on the right from wrapping by giving them white-space: nowrap. Also remove the width limitation so the text doesn't overflow.
#footer-top {
background-color: white;
padding: 0 2.87rem;
}
h3 {
color: #b3d7f8;
font-size: 1.5vw;
padding-top: 3vw;
padding-left: 2vw;
background-color: #538231;
margin: 0
}
#footer-container {
padding: 0 2.87rem;
background-color: white;
}
.myFooter {
/* background-color: white; */
background-color: #538231; /* adjustment */
display: flex;
flex-wrap: nowrap;
justify-content: space-between; /* new */
}
.myFooter .left {
/* flex: 1 1 auto; */
background-color: #538231;
padding-top: 3vw;
padding-left: 2vw;
padding-bottom: 2vw;
}
.myFooter label {
display: block;
color: #c2d59b;
margin-bottom: 1vw;
font-size: 1vw;
}
.myFooter input {
padding: .5vw .5vw;
}
#email {
height: 1vw;
line-height: 1;
font-size: 1vw;
width: 25vw;
}
.submit-button {
background-color: white !important;
border: none !important;
color: black !important;
padding: .5vw .5vw !important;
text-align: center !important;
text-decoration: none !important;
display: inline-block !important;
font-size: 1vw !important;
height: 2vw !important;
width: 5vw !important;
line-height: 1vw !important;
margin-left: 5px; /* change values here; right anchors don't move anymore */
}
.myFooter .right {
/* flex: 1 1; */
background-color: #538231;
padding-bottom: 2vw;
padding-right: 2vw; /* new */
}
.myFooter .right a {
display: block;
color: white;
border: 1px solid white;
/* width: 71%; */
margin: 1vw 0;
text-decoration: none;
white-space: nowrap; /* new */
padding-right: 2vw; /* new */
}
.myFooter .right img {
width: 1.5vw;
height: 100%;
padding: .59vw 0;
display: block;
float: left;
margin: 0 1vw;
}
.myFooter .right span {
font-size: 1vw;
padding: 1vw 0;
display: inline-block;
line-height: 1;
}
#media screen and (max-width: 961px) {
#footer-top,
#footer-container {
padding: 0 1.7rem;
}
}
<div id="footer-top">
<h3>Help create a sustainable and healthy town of Weston</h3>
</div>
<div id="footer-container">
<div class="myFooter">
<div class="left">
<form name="message" method="post">
<section>
<label for="email">Join our mailing list:</label><input id="email" type="email" name="email" placeholder="enter email">
<input class="submit-button" type="submit" value="Submit">
</section>
</form>
</div>
<div class="right">
<a href="https://www.facebook.com/groups/1960906387454685">
<img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/facebook-square-brands-green.png">
<span class="foot-txt">Like us on Facebook</span>
</a>
<a href="https://www.instagram.com/sustainablewestonactiongroup/">
<img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/instagram-brands-green.png">
<span class="foot-txt">follow us on Instagram</span>
</a>
<a href="https://twitter.com/Weston_SWAG">
<img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/twitter-square-brands-green.png">
<span class="foot-txt">Retweet us on Twitter</span>
</a>
</div>
</div>
<div>
jsFiddle demo