Textarea

  
   
<div>
    <div class="card">
    <div class="card-body row mt-3">
                                            
                                         
    <div class="col-md-4">
       <div class="text-end text-area" id="the-count">
          <span id="current">0</span>
          <span id="maximum">/ 100</span>
       </div>
       <textarea class="form-control" id="the-textarea" maxlength="100" rows="4" placeholder="Placeholder" autofocus=""></textarea>
    </div>
    
    <div class="col-md-4">
     <div class="text-end text-area" id="the-count1">
        <span id="current1">0</span>
        <span id="maximum1">/ 100</span>
     </div>
     <textarea class="form-control" id="the-textarea1" maxlength="100" rows="4" placeholder="Placeholder" disabled=""></textarea>
  </div>
  <div class="col-md-4">
     <div class="text-end text-area" id="the-count">
        <span id="current">0</span>
        <span id="maximum">/ 100</span>
     </div>
     <textarea class="form-control border-danger" id="the-textarea" maxlength="100" rows="4" placeholder="Placeholder" autofocus=""></textarea>
     <div class="invalid-feedback">This field is required.</div>

   </div>
   <div class="col-md-4">
     <div class="text-end text-area" id="the-count">
        <span id="current">0</span>
        <span id="maximum">/ 100</span>
     </div>
     <textarea class="form-control border-danger" id="the-textarea" maxlength="100" rows="4" placeholder="Placeholder" autofocus=""></textarea>
     <div class="hint">This is hint.</div>
     <div class="invalid-feedback">This field is required.</div>

   </div>
   <div class="col-md-4">
     <div class="text-end text-area" id="the-count">
        <span id="current">0</span>
        <span id="maximum">/ 100</span>
     </div>
     <textarea class="form-control border-success" id="the-textarea" maxlength="100" rows="4" placeholder="Placeholder" autofocus=""></textarea>
     <div class="success-feedback">This field is required.</div>

   </div>
   <div class="col-md-4">
     <div class="text-end text-area" id="the-count">
        <span id="current">0</span>
        <span id="maximum">/ 100</span>
     </div>
     <textarea class="form-control border-success" id="the-textarea" maxlength="100" rows="4" placeholder="Placeholder" autofocus=""></textarea>
     <div class="hint">This is hint.</div>
     <div class="success-feedback">This field is required.</div>

   </div>


  
 </div>
</div>
</div>
     
          
              

  
   

   
      textarea.form-control {
         font-size: 14px;
     }
     textarea.form-control {
         min-height: calc(1.5em + 0.75rem + 2px);
     }
     
     .form-control {
         color: #363431;
         font-size: 12px;
     }
     .invalid-feedback {
         display: block;
         font-size: 12px;
         color: #E33E16;
         font-weight: 500;
         padding-left: 3px;
     }
     .hint {
         color: #9D9D9B;
         font-size: 12px;
     }
     .success-feedback {
         width: 100%;
         margin-top: 0.25rem;
         color: #1E9E46;
         font-size: 12px;
         font-weight: 500;
     }
     
     .border-success {
         border-color: #1E9E46 !important;
     }
     .border-danger {
         --bs-border-opacity: 1;
         border-color: rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important;
     }