how to block the mesage box

We developing chat application. in that input and out text message is coming.but input and out put is coming side by side but i need one by one.like if input is single later then that line total block then out put will come short or long text it should be come text line only but i am not able to getting that and message box corners are coming different any one please help me

This is we are facing please find screen shot

we need like this and corners are not coming same i need input user message how it is coming we need customer message box corner like that

.userTextDiv {
	position: relative;
	background: white;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
	float: right;
	margin-bottom: 7px;
	font-size: 12px;
	text-align: right;
	padding-top: 5px;
	margin-right: 4px;
	margin-left: 4px;
	clear: right;
}

.userTextDiv::before {
	content: '';
	position: absolute;
	visibility: visible;
	top: -3px;
	right: -11px;
	border: 9px solid transparent;
	border-top: 11px solid #999;
}

.userTextDiv::after {
	content: '';
	position: absolute;
	visibility: visible;
	top: 0px;
	right: -6px;
	border: 9px solid transparent;
	border-top: 8px solid white;
	clear: both;
}

.userTextDiv img {
	display: block;
	height: auto;
	max-width: 100%;
}

.userTextDiv .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: #8e0035;
}

.userTextDiv .message {
	word-break: break-all;
	font-size: 12px;
}

.userTextDivOp {
	text-align: left;
	float: left;
	clear: left;
	position: relative;
	background: white;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
	font-size: 12px;
	margin-bottom: 7px;
	margin-right: 4px;
	margin-left: 11px;
}

.userTextDivOp::before {
	left: -18px !important;
	right: 0px !important;
	content: '';
	position: absolute;
	visibility: visible;
	top: -3px;
	border: 14px solid transparent;
	border-top: 6px solid #999;
}

.userTextDivOp::after {
	left: -6px;
	right: 0px !important;
	content: '';
	position: absolute;
	visibility: visible;
	top: 0px;
	border: 9px solid transparent;
	border-top: 4px solid white;
	clear: both;
}

.userTextDivOp .message {
	word-break: break-all;
	font-size: 12px;
}

.userTextDivOp .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: #8e0035;
}

<div class="userTextDiv">
  <div class="username">user</div>
  <span  class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>

<div class="userTextDivOp">
  <div class="username">customer</div>
  <span class="message">click on oky button</span>
</div>

<div class="userTextDiv">
  <div class="username">user</div>
  <span  class="message">click on oky button</span>
</div>

<div class="userTextDivOp">
  <div class="username">customer</div>
  <span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>