html cannot align table row by row - html

Question

What I am trying is to display message row by row, and finally display a text box for input to send message, now the problem I faced is that I can display the message row by row, however the text box will be show near to the display message horizontally. The text box cannot be show at the bottom row of the page. Here is the unexpected result image. I tried many ways but seems cannot solve it.
Edited: And I need to display incoming message on left side and outgoing message on the right hand side
<div class="container">
<div class="row">
<div class="row" style="width:100%">
<table>
<tr>
<td bgcolor="#CCFFEE">
test() blah,blah,blah 2016-08-12 04:44:20
</td>
<td>
<img src="" alt="Smiley face" height="80" width="80">
</td>
<td></td>
<td></td>
<tr>
<tr>
<td bgcolor="#CCFFEE">
test() Hi 2016-08-12 04:43:16
</td>
<td>
<img src="" alt="Smiley face" height="80" width="80">
</td>
<td></td>
<td></td>
<tr>
</table>
<br/>
<br/>
<table>
<form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">
<tr>
<td>
<input type="text" id="body" name="body" style="width:700px;height:50px;">
</td>
<td>
<button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button>
</td>
</tr>
<br>
</form>
</table>
</div>

Answer 1

Use display: inline-table then float:right; and float:left if you want a <td> to be wider than the other <td>, use colspan. All and more properties and attributes are used in the Snippet below:
SNIPPET
.msg {
display: inline-table;
table-layout: fixed;
border-collapse: collapse;
width: 50%;
}
.left {
float: left;
text-align: left;
}
.right {
float: right;
text-align: right;
}
.input {
width: 100%;
}
img {
display: block;
padding:0 80% 0 0;
margin: 0 auto 0 0;
}
<div class="container">
<div class="row">
<div class="row" style="width:100%">
<form action="http://www.hashemian.com/tools/form-post-tester.php" method="post" name="myForm">
<table class='left msg'>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() blah,blah,blah 2016-08-12 04:44:20
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() Hi 2016-08-12 04:43:16
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
</table>
<table class='right msg'>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() blah,blah,blah 2016-08-12 04:44:20
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() Hi 2016-08-12 04:43:16
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
</table>
<table class='input msg'>
<tr>
<td colspan='5'>
<input type="text" id="body" name="body" style="width:100%;height:50px;">
</td>
<td>
<input type='submit' style="width:100px;height:50px;" id="sent_1" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>

Answer 2

if you are using Twitter Bootstrap in this,
insert <div class="clearfix"></div>
just before
<table>
<form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">
<tr><td><input type="text" id="body" name="body" style="width:700px;height:50px;"></td>
<td><button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button></td>
</tr><br>
</form>
</table>

Answer 3

css:
table,
tr{
width:100%;
}

Answer 4

If the table is not compulsory for you, then you can use flex-box
You can understand the advantage of using flexbox after executing the following code snippet.
It is more customisable and in my html code, The position of image is before message. But in the output for sent message, image is coming after message.
.row{
display: flex;
align-items: center;
}
img{
width: 35px;
}
.reciever{
justify-content: flex-start;
}
.sender{
justify-content: flex-end;
}
.sent, .recieve{
align-items: center;
display: flex;
max-width: 50%;
}
.sent{
flex-direction: row-reverse;
}
form{
padding: 1em;
text-align: center;
}
input{
width: 85%;
height: 20px;
}
button{
height: 25px;
}
<div class="container">
<div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 1</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 1</span>
</div>
</div>
<div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 2</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 2</span>
</div>
</div><div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 3</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 3</span>
</div>
</div>
<form action="">
<input type="text" >
<button>Submit</button>
</form>
</div>
Here is the working Demo