align Html.Textboxfor right css

Question

I can’t align a @Html.Textboxfor of the request I’ve tried in several ways.

 <!--NF-->
 <div class="col-md-2">
     <p><strong> NF</strong></p>
     <p> @Html.TextBoxFor(Model => Model.Identificacao.Numero,
        new { @class = "form-control", @readonly = "readonly",
        @style = "width:110px" })
     </p>
 </div>

 <!--Serie-->
 <div class="col-md-1 ">
     <p><strong>Série</strong></p>
     <p>@Html.TextBoxFor(Model => Model.Identificacao.serie,
        new { @class = "form-control ", @readonly = "readonly",
        @style = "width:50px" })
     </p>
  </div>

  <!--Chave de Acesso-->
  <div class="col-md-5 ">
      <p><strong>Chave de Acesso</strong></p>
      @Html.TextBoxFor(Model => Model.Chave, 
      new { @class = "form-control ", @readonly = "readonly" })
  </div>

  <!--Pedido-->
  <div class="col-md-3 text-right caixa-direita" style="text-align:right">
       @if (Model.Compra == null)
       {
          <p><strong>Pedido</strong></p>
          <p class="caixa-direita">
             @Html.TextBoxFor(Model => Model.Compra.Pedido,
                new { @class = "form-control", @style = "width:105px;
                      text-align:right;" })
           </p>
        }
        else
        {
          <p><strong>Pedido</strong></p>
          <p class="caixa-direita" >
             @Html.TextBoxFor(Model => Model.Compra.Pedido,
              new { @class = "form-control ", @readonly = "readonly",
                    @style = "width:105px; text-align:right;" })
          </p>
        }
   </div>

 <style>
    .caixa-direita input{ text-align:right;}
    .caixa-direita input text {text-align:right;}
    .caixa-direita {text-align:right;}
  </style>

Answer 1

You can use the class float-right

@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css';

.caixa-direita input {
  text-align: right;
}

.caixa-direita input text {
  text-align: right;
}

.caixa-direita {
  text-align: right;
}

<!--NF-->
<div class="col-md-2">
  <p><strong> NF</strong></p>
  <p> 
  <input type="text" Name="Numero" class="form-control" readonly style= "width:110px">
  </p>
</div>

<!--Serie-->
<div class="col-md-1 ">
  <p><strong>Série</strong></p>
  <p>
  <input type="text" name="serie" class="form-control" readonly style= "width:50px">
  </p>
</div>

<!--Chave de Acesso-->
<div class="col-md-5 ">
  <p><strong>Chave de Acesso</strong></p>  
    <input type="text" name="Chave" class="form-control" readonly>
</div>

<!--Pedido-->
<div class="col-md-3 text-right caixa-direita" style="text-align:right">
  
  <p><strong>Pedido</strong></p>
  <p class="caixa-direita"> 
  <input type="text" name="Compra__Pedido" class="form-control float-right" style="width:105px; text-align:right;">
                      
  </p>
</div>