How can I get the textfield next to my button? - php

Question

I am using a plugin in wordpress to display a newsletter form and I try to style it using css. Above the newsletter signup I got a search form and I try to get the same style.
That's the html output and my css:
#sidebar {
font-size: 1em;
font-family: sans-serif, Arial;
color: #2A2A2A;
}
.screen-reader-text {
display: none;
}
#s {
width: 67%;
height: 22px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.247059);
outline: 0 none;
}
#searchsubmit {
width: 25%;
height: 26px;
margin-left: 3px;
background: #fff;
border: 1px solid #000;
transition: all 0.2s ease 0s;
font-size: 0.8em;
font-family: sans-serif, Arial;
float: right;
padding: 0;
}
#searchsubmit:hover {
background: #63B75D;
color: #fff;
border: 1px solid #63B75D;
}
#s:focus {
border: 1px solid #63B75D;
}
#haet-cleverreach-cleverreach_email {
width: 67%;
height: 22px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.247059);
outline: 0 none;
}
#haet-cleverreach-cleverreach_email:focus {
border: 1px solid #63B75D;
}
#haet-cleverreach-submit {
width: 25%;
height: 26px;
margin-left: 3px;
background: #fff;
border: 1px solid #000;
transition: all 0.2s ease 0s;
font-size: 0.8em;
font-family: sans-serif, Arial;
float: right;
padding: 0;
}
#haet-cleverreach-submit:hover {
background: #63B75D;
color: #fff;
border: 1px solid #63B75D;
}
<h3>Suche</h3>
<form role="search" method="get" id="searchform" class="searchform" action="http://backpackfamily.de/">
<div>
<label class="screen-reader-text" for="s">Suche nach:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Suchen" />
</div>
</form>
<h3>Newsletter</h3>
<div class="haet-cleverreach">
<form method="post" class="haet-cleverreach-form">
<input type="hidden" name="haet-cleverreach-is-widget" value="1">
<input type="hidden" name="haet-cleverreach-form-id" value="122548">
<input type="hidden" name="haet-cleverreach-list-id" value="891928">
<div class="haet-cleverreach-field-wrap label-inside type-description ">
<p>Melde dich zu unserem Newsletter an!</p>
</div>
<div class="haet-cleverreach-field-wrap label-inside type-email ">
<input type="email" id="haet-cleverreach-cleverreach_email" name="haet-cleverreach-cleverreach_email" value="" placeholder="E-Mail">
</div>
<div class="haet-cleverreach-field-wrap label-inside type-submit ">
<button type="submit" class="button" id="haet-cleverreach-submit">
→</button>
</div>
</form>
</div>
I don't know what to do, tried various things but nothing worked for me!
Thank you!!

Answer 1

add those styles to yours and it will work fine :
.haet-cleverreach-field-wrap.label-inside.type-email {
width: 67%;
float: left;
}
#haet-cleverreach-cleverreach_email{
width:100% !important;
}

Answer 2

You could add the following CSS:
#haet-cleverreach-cleverreach_email {
float: left;
}