JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<fieldset class=fie id=col >
<legend><font color= #006654> <strong> user</strong></font></legend>
<strong><textarea class=estiloarea disabled=true>['comentario 1']</textarea></strong>
</fieldset>
<fieldset class=fie id=col >
<legend><font color= #006654> <strong> user</strong></font></legend>
<strong><textarea class=estiloarea disabled=true>['comentario 2']</textarea></strong>
</fieldset>
<fieldset class=fie id=col >
<legend><font color= #006654> <strong> user</strong></font></legend>
<strong><textarea class=estiloarea disabled=true>['comentario 1']</textarea></strong>
</fieldset>
<fieldset class=fie id=col >
<legend><font color= #006654> <strong> user</strong></font></legend>
<strong><textarea class=estiloarea disabled=true>['comentario 2']</textarea></strong>
</fieldset>
<fieldset class=fie id=col >
<legend><font color= #006654> <strong> user</strong></font></legend>
<strong><textarea class=estiloarea disabled=true>['comentario 1']</textarea></strong>
</fieldset>
<fieldset class=fie id=col >
<legend><font color= #006654> <strong> user</strong></font></legend>
<strong><textarea class=estiloarea disabled=true>['comentario 2']</textarea></strong>
</fieldset>
</div>
CSS
.estiloarea {
resize: none;
border-top-right-radius: 15px;
background-color: #00CC54;
}
.estiloarea1 {
resize: none;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.redondear{
height: 30px;
border-bottom-color: blue;
border-top-color:blue;
border-right-color:blue;
border-left-color: blue;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
div{border:1px solid red;margin:5px; width:80%; overflow:hidden;}
.fie{
height: 10%;
width: 25%;
margin: 0 2px;
}
.fie:nth-of-type(2n+1) { float: left;clear:right; }
.fie:nth-of-type(2n) { float: right;clear:left; }