Issue with autosize input and it's neighbor input

Hi Please see a link below.

<div class="parent">
<div class="child-a">
    <input type="text" name="name" value="" class="name" placeholder="Name:" data-autosize-input='{ "space": 40 }' />
</div>
<div class="child-b">
    <input name="email" placeholder="Email:" class="email">
</div>

I made two inputs side by side. First one(name) is resizing depending on the length of the text. Second one(email) has min-width so when the name becomes wider than 50%, the email moves down to the next line. And I find two issues.

First issue is that when email input moves down, it does not cover the whole width and stays as 50% which is its min-width. Is there any way to fix it so that the email covers the whole width when it moves down below.

Second issue is that the name gets longer than the parent boundary, it goes beyond the box. Is there way to stop within the parent boudary?

You can see from the image below what it looks like when you the name gets wider than the parent and email does not cover the whole width.

Thank you.

Solution

OK this is a hack since we dont want to edit the autosize plugin

Add to CSS

.big {
    width:100% !important;
    clear:both;
}
.big > input{
    width:100% !important;
}

Add to JS

setInterval(function(){
   if( $('.child-a > input').width()>$('.child-a').parent().width()/2){
    $('.child-a,.child-b').addClass('big');
   }else{
     $('.child-a,.child-b').removeClass('big');
   }
},200);

Do forget about the media queries they work when you resize or show your webapp on different device height and width.