text-overflow and dynamic width of <div>'s that don't overflow - html

Question

I'm trying to use a style that will grow a border until you reach 300px and then will use text-overflow: ellipses when you reach the maximum. Click Here to go to a JSFIDDLE that contains what I'm working on.
I want the longest message text to stop at 300px and then show an ellipses. The shorter texts should make the border shrink to the size of the text. Any help is greatly appreciated.
.border{
background-color: #ffffff;
border: 3px solid #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 10px #999999;
margin-left: 20px;
margin-top: 5px;
padding: 2px;
position: relative;
z-index: 4;
}
.border.small {
/* background-image: url('%Image(G3VISIF_EXP_BKGRD_SM)'); */
box-shadow: 1px 1px 10px #999999;
background-size: 100% 100%;
height: 22px;
width: auto;
}
.message {
color: #5c5d60;
font-family: Arial;
font-size: 17px;
font-weight: bold;
padding-left: 5px;
padding-top: 2px;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 300px;
display: block;
overflow: hidden;
}
<div class="border small">
<div class="message">
Is [GRIDREC:EMPLID] Equals 123456789012345678901234567890
</div>
</div>
<div class="border small">
<div class="message">
Is Part Time
</div>
</div>
<div class="border small">
<div class="message">
Recieves Full Benefits
</div>
</div>

Answer 1

It's very simple.
Here are two ways (without changing your current html structure):
1- If you want the messages to be on new lines, keeping your current structure:
.expression {
/* rest of styles */
float: left;
clear: left;
}
Demo http://jsfiddle.net/L66fs1y5/2/
2- If it's ok to have the messages on the same line, keeping your current structure:
.expression {
/* rest of styles */
display: inline-block;
}
Demo http://jsfiddle.net/L66fs1y5/3/