how to display div one by one using css - html

Question

we are developing chat application in that chat how much content will have that much width we want displaying separately one by one. and also chat length is big displaying of chat content in multi line.
We are displaying the content and how much content have that much size of width div displaying but side by side div is coming. we want to display step by step how to do.and if content length is long then displaying to multi line.
.right {
position: relative;
background: white;
text-align: right;
padding: 10px 15px;
border-radius: 6px;
border: 1px solid #ccc;
float: right;
right: 20px;
}
.right::before {
content: '';
position: absolute;
visibility: visible;
top: -1px;
right: -10px;
border: 10px solid transparent;
border-top: 10px solid #ccc;
}
.right::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -8px;
border: 10px solid transparent;
border-top: 10px solid white;
clear: both;
}
<div>
<div class="right">
<span>thanks</span>
</div>
<div class="right">
<span>thanks</span>
</div>
</div>
<div>
<div class="right">
<span>thanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanks</span>
</div>
</div>

Answer 1

You have to clear the right float with overflow: hidden; for instance.
<div class="clear">
<div class="right">
<span>thanks</span>
</div>
</div>
<div class="clear">
<div class="right">
<span>thanks</span>
</div>
</div>
<div class="clear">
<div class="right">
<span>thregre gerg ergr geg reger ger gergregeg erger gerg erg erg ergergerger ge anks</span>
</div>
</div>
CSS
.clear { overflow: hidden; margin-bottom: 10px;}
Fiddle

Answer 2

You can use word-break:break-all(or normal|break-all|keep-all) Break words between any two letters.
and use clear property control the behavior of floating elements.
.right {
position: relative;
background: white;
text-align: right;
padding: 10px 15px;
border-radius: 6px;
border: 1px solid #ccc;
float: right;
right: 20px;
}
.right span{
word-break: break-all;
}
.fix{
clear:both;
}
.right::before {
content: '';
position: absolute;
visibility: visible;
top: -1px;
right: -10px;
border: 10px solid transparent;
border-top: 10px solid #ccc;
}
.right::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -8px;
border: 10px solid transparent;
border-top: 10px solid white;
clear: both;
}
<div class="fix">
<div class="right">
<span>thanks</span>
</div>
</div>
<div class="fix">
<div class="right">
<span>thanks</span>
</div>
</div>
<div class="fix">
<div class="right">
<span>thanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanks</span>
</div>
</div>