Horizontal alignment to margins while not losing vertical alignment - html

Question

In HTML, I have two elements, one with text and one containing a couple of buttons.
Instead of touching in the middle, I want them spaced to align to the left and right margins. So I want my text aligned to the left margin, and my buttons aligned to the right margin, without losing their vertical alignment as is.
I also happen to be using Bootstrap 3.
When I use pull-left/pull-right, float:left/float:right, or align="left"/align="right", I get a change in the vertical alignment of these two elements.
Paired down code looks like this essentially:
<div style="width:200px;height:100px">
Delete dashboard?
<button class="btn btn-secondary cancel">
Cancel
</button>
<button class="btn btn-danger">
Delete
</button>
</div>
What is the the most straightforward way to align these items to the left and right margins? I can do it with a table, but is that not the ideal way?
[![A modal example][2]][2]

Answer 1

Without seeing your code, I would use a flex layout. The key in a flex row is to use justify-content: space-between to push 2 children in the row to the far edges. Then align-items on the parent will set the vertical alignment.
.flex {
display: flex;
}
.col {
flex-direction: column;
max-width: 250px;
border: 1px solid black;
}
.bot {
border-top: 1px solid #ccc;
justify-content: space-between;
align-items: center;
}
<div class="flex col">
<div>
<h1>confirm</h1>
</div>
<div class="flex bot">
<p>delete dashboard</p>
<div>
<button>cancel</button>
<button>delete</button>
</div>
</div>
</div>

Answer 2

What about this?
<div class="row">
<div class="col-md-6">Dashboard</div>
<div class="col-md-6 text-right">Cancel Delete</div>
</div>
This will split your area in two columns, where all content of the right column will be aligned right, without affecting the CSS of the elements itself.