Trimming field content to prevent wrapping

by tacomanator

HTML

<div class="container">
    <div class="title">
        Employee
    </div>
    <div class="buttons">
      <button type="button">Add New</button>
    </div>
</div>

<div class="container">
    <div class="title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, can u see me?
    </div>
    <div class="buttons">
      <button type="button">Add New</button>
    </div>
</div>

CSS

.title {
    width:300px;
    background-color:lightgreen;
    white-space:nowrap;
    overflow-x:hidden;
    margin-right:20px;
    display:inline-block;
}

.buttons {
    display:inline-block;
}

.container {
    padding:5px;
    margin-top:10px;
    background-color:darkblue;  
}