delete

HTML

<div class="header">
    <div class="cell1 cell">
        |cell1
    </div>
    <div class="cell2 cell">
        |cell2
    </div>
    <div class="cell4 cell">
        |cell4
    </div>
    <div class="cell3 cell">
        <form>
            <input type="text">
            <button>go</button>
        </form>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
.header {
    min-width: 500px;
    width: 100%;
    margin: 20px auto;
    border: 1px solid green;
    overflow: hidden;
}
.cell {
    border: 1px solid #ccc;
}
.cell1 {
    float: left;
    width: 80px;
}
.cell2 {
    float: left;
    width: 80px;
}
.cell3 {
    overflow-x: hidden;
    
    background: #ccc;
}
    .cell3 form {
        width: 100%;        
    }

.cell4 {
    float: right;
    width: 80px;
}