Can't get width to change auto ( can't use float )

I have a box here that requires the width to change to the width of the text. The only problem is I can not use float: right; which would solve that issue because I can't use it for the php application I am building. How can I get the width to change? I am using margin-left: auto; to solve the problem of it staying to the right, but the width stays at the max width I set it to. I can't use float that is the problem. How can I go about fixing it? I blocked out the float in the code but if you activate it and block out margin-left: auto; you will see what I mean.

Basically if there is less text in the box it will have a smaller width than if there was more text.

<style>
* {
    margin: 0;
    padding: 0;
}
.gBoxTall {
    background-color:#0C9;
    clear: both;
    margin-left: auto;
    /* float: right; */
    margin-top: 15px;
    max-width: 270px;
    padding-left: 22px;
}
.gBoxTall .right {
    background-color:#0C9;
}
.gBoxTall .right p {
    margin-left: -5px;
    padding: 8px 30px 0 0;
}
.gBoxTall .bo开发者_JAVA技巧ttom {
    background-color:#0C9;
    height: 20px;
    margin: -10px 0 0 -22px;
}
.gBoxTall .bottom .right {
    background-color:#0C9;
    float: right;
    height: 20px;
    width: 43px;
}
</style>
<div class="gBoxTall">
  <div class="right">
    <p class="message">My name is Earl.</p>
  </div>
  <div class="bottom">
    <div class="right"></div>
  </div>
</div>

---

You can try what was suggested at How to make div not larger than its contents? - e.g. use display:inline-block and don't use the width property.