Как соединить кнопку и форму вместе?

Question

[jjsso]

Не могу сделать так , чтоб кнопка и форма были соеденены вместе как на макете. В гугле тоже не найти такого решения, поэтому обращаюсь сюда, буду благодарен вам за помощь!

<section class="start-learning">
     <div class="container">
     <div class="subscribe-form">
     <input type="email" placeholder="Enter your email" class="email-input">
      <a href="#" class="email-subscribe">Subscribe</a>
     </div>
     </div>
    </section>

.email-input {
height: 37.5px;
width: 299px;
border: solid #979797 1.5px;
padding-left: 10px;
font-family: 'Titillium Web';
font-weight: 400;
font-size: 18px;
line-height: 44px;
letter-spacing: 0.25px;
color:#979797



}


.email-subscribe {
 padding: 7.5px 23px;
 background-color: #1D6FF3;
font-family: 'Titillium Web';
font-weight: 400;
font-size: 18px;
line-height: 44px;
letter-spacing: 0.25px;
color: #FFFFFF;
border-left: 10px;


}

Comments

[Ankhena]

Да, убрать пробел это, конечно, решение, но начать с того, что ненадёжное.

Что имеет смысл сделать:
1. Форму верстать тегом form
2. Кнопку отправки тегом button с type="submit"
Это чтобы получить минимальную правильную начальную функциональность и заодно, семантику.
3. Форме задать display flex или grid.
Тогда вид перестанет зависеть от разметки (наличия пробела)

p.s.

placeholder="Enter your email"

Вы путаете плейсхолдер и label. Загуглите разницу.
"Enter your email" это label - подпись поля.
А placeholder должен выглядеть как-то так [e-mail]

Answer 1

[VoidVolker]

У вас там пробел между элементами. Используйте инспектор:

Comments

[jjsso]

ужас , как я не догадался... Спасибо за помощь!