Apply CSS to a button

Question

In the company where I work we have an ERP system, and I am passing some things to the Web, but in the system there is a button 'inside' an input that is already proper to the Dataflex language

How do I make this look or alluding to being inside the input so users don’t notice so many differences ?

<div class="col-lg-10"><!-- Inicio Input Descrição -->
    <label for="ex1">Descrição:</label><button type="button" data-toggle="modal" data-target="#meuModal">...</button>
    <input type="text" required class="form-control descricao-input" style="text-transform:uppercase" maxlength="20"  name="descri"><br>
</div>

Answer 1

You are using correct bootstrap ? need to indicate a .input-group.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="input-group">
      <input type="text" class="form-control" placeholder="input com botão">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Botão</button>
      </span>
    </div>

Below is related documentation: Documentation

Answer 2

Thus the button is not inside the input but gives the feeling to the user.

.grupo {
  margin: 0;
  padding: 0;
}

button, input, label {
  float:left;
  border:0;
}


.input_button {
  margin-left:3px;
  border:1px solid black;
  float:left;
}

<div class="grupo col-lg-10">
  <label for="ex1">
    Código:
  </label>
  <div class="input_button">
    <input type="text" id="ex1"/>
    <button onclick="console.log('clique no botão do input');">
      ...
    </button>
  </div>
</div>