Border width to change as per the inner div conten

Question

I've the below HTML Code in my document.

<div class="panel-body chat-box-main">
    <div class="chat-box-left">Hello, Welcome!. You can ask me
        questions on Compliance Policy ..</div>
    <div class="chat-box-name-left">
        <img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
            class="img-circle"> - Bot
    </div>
    <hr class="hr-clas">



    <div class="chat-box-right" id="chatbox">Hi</div>
    <div class="chat-box-name-right">
        <img src="smiley.jpg" alt="bootstrap Chat box user image"
            class="img-circle">
    </div>
    <div class="chat-box-left">Hello</div>
    <div class="chat-box-name-left">
        <img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
            class="img-circle">- Bot
    </div>
</div>

And my CSS is as below.

.hr-clas {
    border-top: 1px solid #A12EB3;
}

.chat-box-main {
    height: 400px;
    overflow-y: auto;
}

.chat-box-div {
    border: 2px solid #A12EB3;
    border-bottom: 2px solid #A12EB3;
}

.chat-box-head {
    padding: 10px 15px;
    border-bottom: 2px solid #A12EB3;
    background-color: #B25AE5;
    color: #fff;
    text-align: center;
}

.chat-box-left {
    width: 100%;
    height: auto;
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #C5C5C5;
    font-size: 12px;
    border: 2px solid #73AD21;
    border-radius: 25px;
}

.chat-box-left:after {
    top: 100%;
    left: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #C5C5C5;
    border-width: 15px;
    margin-left: -15px;
}

.chat-box-name-left {
    margin-top: 30px;
    margin-left: 60px;
    text-align: left;
    color: #049E64;
}

.chat-box-name-left img {
    max-width: 40px;
    border: 2px solid #049E64;
}

.chat-box-right {
    width: 100%;
    height: auto;
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #C5C5C5;
    font-size: 12px;
}

.chat-box-right:after {
    top: 100%;
    right: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #C5C5C5;
    border-width: 15px;
    margin-left: -15px;
}

.chat-box-name-right {
    color: #354EA0;
    margin-top: 30px;
    margin-right: 60px;
    text-align: right;
}

.chat-box-name-right img {
    max-width: 40px;
    border: 2px solid #354EA0;
}

.chat-box-footer {
    background-color: #D8D8D8;
    padding: 10px;
}

Here my requirement is to automatically set the width of each box(div) as per the content entered and float them accordingly to left/right.

Currently my output is as below.

Here as seen in the above screenshot, though there is only one word in the div, it is taking the entire width. Please let me know on how can I limit this to the text width.

Thanks

Answer 1

Are you looking some thing like this, Try this add display: inline-block; to div

.hr-clas {
    border-top: 1px solid #A12EB3;
}

.chat-box-main {
    height: 400px;
    overflow-y: auto;
}

.chat-box-div {
    border: 2px solid #A12EB3;
    border-bottom: 2px solid #A12EB3;
}

.chat-box-head {
    padding: 10px 15px;
    border-bottom: 2px solid #A12EB3;
    background-color: #B25AE5;
    color: #fff;
    text-align: center;
}

.chat-box-left {
    width:auto;
    height: auto;
    padding: 35px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #C5C5C5;
    font-size: 12px;
    border: 2px solid #73AD21;
    border-radius: 25px;
  display: inline-block;
  
}

.chat-box-left:after {
    top: auto;
    left: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #C5C5C5;
    border-width: 15px;
    margin-left: -15px;
}

.chat-box-name-left {
    margin-top: 30px;
    margin-left: 60px;
    text-align: left;
    color: #049E64;
}

.chat-box-name-left img {
    max-width: 40px;
    border: 2px solid #049E64;
}

.chat-box-right {
    width:auto;
    height: auto;
    padding: 35px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #C5C5C5;
    font-size: 12px;
  display: inline-block;
}

.chat-box-right:after {
    top: 100%;
 display: inline-block;   right: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #C5C5C5;
    border-width: 15px;
    margin-left: -15px;
}

.chat-box-name-right {
    color: #354EA0;
    margin-top: 30px;
    margin-right: 60px;
    text-align: right;
}

.chat-box-name-right img {
    max-width: 40px;
    border: 2px solid #354EA0;
}

.chat-box-footer {
    background-color: #D8D8D8;
    padding: 10px;
}

<div class="panel-body chat-box-main">
    <div class="chat-box-left">Hello, Welcome!. You can ask me
        questions on Compliance Policy ..</div>
    <div class="chat-box-name-left">
        <img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
            class="img-circle"> - Bot
    </div>
    <hr class="hr-clas">



    <div class="chat-box-right" id="chatbox">Hi</div>
    <div class="chat-box-name-right">
        <img src="smiley.jpg" alt="bootstrap Chat box user image"
            class="img-circle">
    </div>
    <div class="chat-box-left">Hello</div>
    <div class="chat-box-name-left">
        <img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
            class="img-circle">- Bot
    </div>
</div>

Answer 2

try this https://plnkr.co/edit/KXF1jkOd7G9JB8j7DIGC

I have changed the div to span. Hope this helps !

<span class="chat-box-left">Hello, Welcome!. You can ask me
    questions on Compliance Policy ..</span>