placeholder disappears after changing margin between inputs - html

Question

I have a form in a Landing Page. I just wanted to change the margin between inputs:
This is what I have now:
I want to achieve this result:
This is the code:
<input class="input-form-catalogue" type="text" name="name" placeholder="name*" required>
<input class="input-form-catalogue" type="email" name="email" placeholder="email*" required>
<div class="row">
<div class="col-6">
<select name="country" title="country*" class="select-country-form-catalogue selectpicker text-center">
#include('includes.options-country')
</select>
</div>
<div class="col-6" style="padding-right:7.5px;padding-left: 2px;">
<input class="input-form-catalogue" type="text" name="phone" placeholder="phone*" required>
</div>
</div>
These are the classes:
.input-form-catalogue {
width: 100%;
padding: 0.7rem;
border: 0.1px solid #7B7B79;
background: transparent;
margin: 1rem 0;
text-align: center;
}
.select-country-form-catalogue {
width: 100%;
padding: 0.55rem;
border: 0.1px solid #7B7B79;
background: transparent;
margin: 1rem 0;
text-align: center;
color: #7B7B79;
}
I just simply wanted to change the margin attribute on the css classes. So I changed them to:
margin: 0.5rem 0;
But after doing that the placeholders on the text input dissapear. I have no idea why:
Any suggestions? Thank you in advance.

Answer 1

I solved it by adding another class called "press" to each text input, then I changed the CSS to:
.input-form-catalogue.press {
width: 100%;
padding: 0.7rem;
border: 0.1px solid #7B7B79;
background: transparent;
margin: 0.5rem 0;
text-align: center;
}