html - How to manage textarea right side overflow in css? -

i have create 2 <textarea>s in 2 different <div>s , both have come in single line. , both <textarea>s have occupy 100% width (50% each) in types of screen.

however, when trying second <textarea>, right side overflowing , not able manage right margin (in css) <textarea>. how can avoid right overflow <textarea>?

.container {    background-color: lightblue;    border: 5px solid black;    min-height: 500px;  }  textarea {    width: 100%;    height: 100%;    border: 3px none #cccccc;    margin: 10px 10px 10px 10px;    border: 1px solid black;  }  .left {    float: left;    width: 50%;  }  .right {    float: left;    width: 50%;  }

<div class='left'>    <textarea>left </textarea>  </div>   <div class='right'>    <textarea>right</textarea>  </div>

remove margin textarea because margin calculated form outer width of element, , give display: table; container.