Q:

How do I expand the input writing area? 

The input text area gets smaller when it goes mobile and it doesn't look nice.  How can I extend this field? 

  .arama input{
    border: 1px solid #4d9df2!important;
    padding: 18px 227px 19px 21px;
    height: 41px;
    border-radius: 60px!important;
    /* font-size: 18px!important; */
    color: #000;
  }

A:

Reduce the right padding. 
Ideally, the left and right padding should be the same, but you have a button within your input element, so the right padding should be the width of the button plus the left padding. 
Here's the difference between what you have and what you should want to have:

.i1 {
    border: 1px solid #4d9df2!important;
    padding: 18px 227px 19px 21px;
    height: 41px;
    border-radius: 60px!important;
    color: #000;
  }
  
.i2 {
    border: 1px solid #4d9df2!important;
    padding: 18px 21px 19px 21px;
    width: 356px;
    height: 41px;
    border-radius: 60px!important;
    color: #000;
  }
<input class="i1" value="ORIGINAL Text here, Text here, Text here, Text here, Text here, Text here" />
<input class="i2" value="FIXED Text here, Text here, Text here, Text here, Text here, Text here" />

