display Text, Textfield & Button in one line using phtml code

Question

visit link1

search for "check" using CTRL + F, than you can see :

I wanted to display like this as link2

we are using following code :

Phtml

<?php if ($this->isFieldVisible('postcode')): ?>
        <li class="item">
        <img src ="http://totaltoys.com/media/font-100.png"> 
            <label for="search"<?php if ($this->isFieldRequired('postcode')):?> class="required" <?php endif;?>><?php if ($this->isFieldRequired('postcode')):?><em>*</em><?php endif;?><?php echo Mage::helper('webdevlopers_productpageshipping')->__('') ?></label>
            <div class="search">

                <input placeholder="Enter your PIN Code" class="input-text validate-postcode<?php if ($this->isFieldRequired('postcode')):?> required-entry<?php endif;?>" type="text" id="estimate_postcode" name="estimate[postcode]" value="<?php echo $this->htmlEscape($this->getFieldValue('postcode')) ?>" />
            </div>
        </li>
   <?php endif; ?>

css

    li.item {
  align-items: center;
  display: flex;
}
li.item img {
  opacity: .3;
  height: 20px;
  width: 40px;
}
li.item label {
  color: #aaa;
  font-family: 'ubuntu';
}
li.item .search {
  margin-left: 6px;
}
li.item .search input {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: .5rem;
}
li.item .search button {
  background-color: #00bfff;
  border: none;
  border-radius: 3px;
  color: #fefefe;
  padding: .5rem .5rem;
}

Answer 1

Try this

Add that image before text(Check Availabilty at). Also Try your end it's a css work only

.shipping-estimation-form {float: left;margin: 0 auto;padding: 0;width: 50%;}
.check_delivery .actions {float: left;width: 25%;}
.check_delivery .f-right {margin-left: 0 !important;}
.check_delivery .f-right, .right {float: left !important;}
.check_delivery .button > span {background: #565656 none repeat scroll 0 0; width: 100% !important;}
.check_delivery .button span {padding: 3px;text-transform: capitalize !important;}
.check_delivery .item.last.odd { padding: 0;}
.check_delivery .block-subtitle {float: left;margin-top: 10px;padding-left: 10px;  width: 21%;}
.check_delivery #estimate_postcode {margin: 0 auto !important;padding: 0 !important;width: 100% !important;}
.check_delivery .search {margin: 0 auto !important; width: 100%;}