relative positioning of chat bubbles from Mysql output

Hello Tony

I am developing an android chat app using appiventor and i am using below HTML to put the content of MySQL output into my android app. However i notice the messages get overwritten every time with the new content and i wanted each message to appear one by one, just like any other conversation. i struggled for the past couple of days, but could not find a solution. i am a novice to HTML and any help would be greatly appreciated.

regards
rk

PS : i am using CSS within the HTML since an outside CSS is not supported by the appinventor.

my html code below :

Speech Bubble

.chat {
width: 400px;
}

.bubble{
background-color:#7ec0ff ;
border-radius: 5px;
box-shadow: 0 0 6px #7ec0ff;
display: inline-block;
padding: 10px 18px;
position: relative;
vertical-align: top;
}

.bubble::before {
background-color: #7ec0ff;
content: "\00a0";
display: block;
height: 16px;
position: absolute;
top: 11px;
transform: rotate( 29deg ) skew( -35deg );
-moz-transform: rotate( 29deg ) skew( -35deg );
-ms-transform: rotate( 29deg ) skew( -35deg );
-o-transform: rotate( 29deg ) skew( -35deg );
-webkit-transform: rotate( 29deg ) skew( -35deg );
width: 20px;
}

.me {
float: right;
margin: 5px 45px 5px 20px;
}

.me::before {
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
right: -9px;
}

.you {
float: right;
margin: 5px 20px 5px 45px;
}

.you::before {
box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
right: -9px;
}