Shubanker Shubanker - 9 months ago 36
CSS Question

make button stick to the input tag

I was designing an layout for my page where I have an textarea and an input area which can be cloned into multiple ones everything is working fine but I want the

button after the input tag to stick together with the input tag even thou the screen size is resized as of now they are displayed as 2 different elements and when viewed in small screen they are displayed in separate line.

here is the html part I wish to displayed merged

<div class="pure-control-group">
<input type="text" name="url[]" class="pure-input-2-3">
<button type="button" class="pure-button button-add">+</button>

here is what happens when viewed in small screen

saperating button

full page layout can be viewed here.


The reason for button getting separated from input upon resize is because of display property inside your media query.

When screen resolution is less than 480px according to css input element display property is changed from inline-block to block

See your css below

@media only screen and (max-width: 480px)
.pure-form input:not([type]), .pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form label {
margin-bottom: .3em;
display: block;

Add the below css to your stylesheet

@media only screen and (max-width: 480px){
.pure-form input[type=text]{



This query makes it inline-block even after resize