Problem generating modal window layout with form using Thymeleaf

Question

Good afternoon. I’m managing to generate the modal windows of the bootstrap and load the data into the form, but the layout of the form is getting all messy. I’ll leave you two pictures to show you what’s going on.

1. How it should look

2. What it looks like when Thymeleaf generates Layout

Modal Code:

<!-- Modal Visualizar -->
<div class="modal fade" id="view-modal" th:id="${atendimento.id}" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
  <div class="modal-dialog modal-lg" tabindex="50" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modalLabel">Detalhes do Atendimento</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" action="#" th:object="${atendimento}" th:id="${atendimento.id}"  method="POST">
          <fieldset>
            <div class="panel panel-primary">
              <div class="panel-heading">Atendimento</div>
              <div class="panel-body">
                <div class="col-md-11 control-label">
                  <p class="help-block">* Campo Obrigatório </p>
                </div>
                
                <!-- ==== CLIENTE ==== -->										                                    
                <!-- Razão Social --> 
                <div class="form-group">
                  <label class="col-md-2 control-label" for="razaoSocial">Razão Social</label>
                  <div class="col-md-5">
                    <input id="razaoSocial" name="razaoSocial" type="text" placeholder="Razão Social" th:value="${atendimento.cliente.razaoSocial}" readonly="readonly" class="form-control input-md">
                  </div>
                </div>
                
                <div class="form-group">
                  <label for="Codigo" class="col-md-2 control-label">Código *</label>
                  <div class="col-md-1">
                    <input id="cliente" name="cliente" th:value="${atendimento.cliente.id}" class="form-control input-md" type="text" readonly="readonly">
                  </div>
                  <label for="status" class="col-md-5 control-label">Status</label>
                  <div class="col-md-2">
                    <input class="form-control input-md" th:value="${atendimento.cliente.status}" readonly="readonly" type="text">                                     
                  </div>
                </div>
                
                
                <div class="form-group">
                  <label class="col-md-2 control-label" for="Telefone">Telefone *</label>
                  <div class="col-md-4">
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                      <input id="telefone" name="telefone" class="form-control input-md" readonly="readonly" th:value="${atendimento.cliente.telefone}" placeholder="XX XXXX-XXXX" type="text" maxlength="12" OnKeyPress="formatar('## ####-####', this)">
                    </div>
                  </div>
                  
                  <label class="col-md-1 control-label" for="Celular">Celular</label>
                  <div class="col-md-3">
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                      <input id="celular" name="celular" class="form-control input-md" readonly="readonly" th:value="${atendimento.cliente.celular}" placeholder="XX XXXXX-XXXX" type="text" maxlength="13" OnKeyPress="formatar('## #####-####', this)">
                    </div>
                  </div>
                </div>
                
                <div class="form-group">
                  <label class="col-md-2 control-label" for="email">Email *</label>
                  <div class="col-md-5">
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                      <input id="email" name="email" class="form-control" readonly="readonly" th:value="${atendimento.cliente.email}" placeholder="[email protected]" required type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" >
                    </div>
                  </div>
                </div>
                <!-- ==== /. CLIENTE ====-->
                
                <hr size="30">
                
                <div class="form-group" >
                  <label for="codigoAtendimento" class="col-md-2 control-label">Código de Atendimento*</label>
                  <div class="col-md-2">
                    <input id="id" name="id" th:value="${atendimento.id}" class="form-control" placeholder="Exemplo: 0000252017" readonly="readonly" type="text">                               
                  </div>
                  
                  <div class="col-md-3 selectContainer" >
                    <select class="form-control" name="tipoAtendimento" readonly="readonly">
                      <option value="Performance">Performance</option>
                    </select>
                  </div>
                  
                  <div class="col-md-3 selectContainer">
                    <select class="form-control" name="modulo" readonly="readonly">
                      <option selected th:value="${atendimento.modulo}" th:text="${atendimento.modulo}"></option>										                  
                    </select>
                  </div>                                             
                  
                </div>
                
                <div class="form-group" >
                  <label for="Descricao" class="col-md-2 control-label">Descrição *</label>
                  <div class="col-md-5">
                    <input id="descricao" name="descricao" th:value="${atendimento.descricao}" class="form-control" placeholder="Descrição do Atendimento" type="text" readonly="readonly">
                  </div>
                  <div class="col-md-4">
                    <div class="input-group date" id='datetimepicker'>
                      <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
                      <input type="text" id="dataAtendimento" name="dataAtendimento" class="form-control" th:value="${#dates.format(atendimento.dataAtendimento, 'dd/MM/yyyy')}" readonly="readonly">
                    </div>                               
                  </div>
                </div>
                
                <div class="form-group">
                  <label for="admUser" class="col-md-3 control-label">Nome do usuário que solicitou suporte *</label>
                  <div class="col-md-3">
                    <input id="admUser" name="admUser" th:value="${atendimento.admUser}" class="form-control input-md" readonly="readonly" type="text">
                  </div>                                        
                </div>
                
                <div class="form-group">
                  <label for="operador" class="col-md-2 control-label">Operador*</label>
                  <div class="col-md-3">
                    <input id="operador" name="operador" readonly th:value="${userName}" readonly="readonly" class="form-control" required type="text">
                  </div>
                </div>
                
                <div class="form-group" >
                  <label for="solucao" class="col-md-2 control-label">Solução *</label>
                  <div class="col-md-8">
                    <textarea id="solucao" name="solucao" th:text="${atendimento.solucao}" readonly="readonly" class="form-control" cols="70" rows="10" placeholder="Descrição detalhada da solução referente ao problema apresentado pelo usuário."></textarea>
                  </div>
                </div>
                
                <div class="form-group">
                  <label for="observacao" class="col-md-2 control-label">Observação *</label>
                  <div class="col-md-8">
                    <textarea id="observacao" name="observacao" th:text="${atendimento.observacao}" readonly="readonly" required class="form-control" cols="70" rows="10" placeholder="Observações sobre o atendimento."></textarea>
                  </div>
                </div>
                
                <div class="form-group">
                  <label for="Status" class="col-md-2 control-label">Status *</label>
                  <div class="selectContainer" name="Status">
                    <div class="col-md-3">
                      <select class="form-control" name="statusAtendimento" >
                        <option th:value="${atendimento.statusAtendimento}" th:text="${atendimento.statusAtendimento}"></option>                           
                      </select>
                    </div>
                  </div>          
                </div>                                
              </div>
            </div>                    
          </fieldset>
        </form>	
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
      </div>						                                
    </div>
  </div>
</div>
<!-- /.Modal Visualizar -->