HTML/CSS- Push buttons to line up under another element

Question

This is how my form is right now- https://imgur.com/a/nFx2lyA

Is there a way to "push" the buttons to the right? I want my "-" button to be under the downwards arrow in the dropdown.

This is an example of what I want (It uses a textbox, but that should be a dropdown. The button that says "alignment is bad" is where I want my "-" button to be at). Codepen

HTML Code:

.button6 {
  right: 200px;
  width: 30px;
  padding: 8px 10px;
  text-align: right;
  font-size: 60%;
  margin-left: 15px;
  border-radius: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  white-space: pre;
}

.btns {
  text-align: right;
}

.input,
.select {
  margin-left: 10px;
  width: 100%;
  margin-bottom: 5px;
}

<label for="services1">Service 1:</label> </td>
<td width="50%">
  <select name="services1" id="services1" v-model="services1">
  </select>
</td>
</tr>
</table>
<div class="btns">


  <button type="button" class="button6" id="add_service">+</button>
  <button type="button" class="button6" id="delete_row">-</button>

</div>

Answer 1

尝试浮动属性，以及身体上的边距：0

＆＃13;

＆＃13;

 
body {
  margin: 0;
}
.button6 {

right: 200px;   
width:30px;
padding: 8px 10px;
text-align: right;
font-size: 60%;
margin-left : 15px;
border-radius: 5px;
margin-bottom:5px;
margin-top:5px;
white-space: pre; 

}
.btns {
  text-align: right;
}
.input,.select {
  margin-left: 10px;
  width: 100%;
  margin-bottom:5px;
}

＆＃13;

<div style="float:right;">
  <label for="services1">Service 1:</label>
  <select name="services1" id="services1" v-model="services1">
</div>
                    </select>
<div class="btns">
<button type="button" class="button6" id="add_service">+</button> 
<button type="button" class="button6" id="delete_row">-</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

当你浮动时，你可能需要清除：你可以清除左，右或两者