Bootstrap 4 text pushes buttons to new line - html

Question

I have the following HTML page that renders fine on medium and large devices but it has a problem with smaller screens.
When the screen becomes small the text inside the grey elements ('Annoying text here' from the example below) takes all the space, pushing the 2 right-floating buttons on a new line without maintaining them on the same height.
Here is a sample of the HTML :
<div class="row mt-2">
<div class="col-sm-12 col-lg-4 offset-lg-1 gray">
<p class="h3 text-primary">Annoying text here
<button class="btn btn-md float-right ml-3 bg-primary">
<i class="fas fa-cogs text-white"></i>
</button>
<button class="btn btn-md float-right bg-primary">
<i class="fas fa-print text-white"></i>
</button>
</div>
</div>
The .gray CSS class is the following :
.gray{
height: 70px;
margin-top: 10px;
padding-left: 20px;
padding-top:20px;
background-color:#eee;
border-style: solid;
border-radius: 5px;
border-width: 1px;
border-color: #337AB7;
}
What I was aiming for is for the text to either be covered by the buttons without pushing them around or for it to become collapse
e.g. instead of "Annoying text here" something like "Annoying te..."
So to avoid the problem in the first place. I'm not sure I've expressed my self so let me know and I will edit! Thanks a lot
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<style type="text/css">
.gray{
height: 70px;
margin-top: 10px;
padding-left: 20px;
padding-top:20px;
background-color:#eee;
border-style: solid;
border-radius: 5px;
border-width: 1px;
border-color: #337AB7;
}
</style>
<div class="container">
<div class="row mt-2">
<div class="col-sm-12 col-lg-4 offset-lg-1 gray">
<p class="h3 text-primary">Annoying text here
<button class="btn btn-md float-right ml-3 bg-primary">
<i class="fas fa-cogs text-white">&times</i>
</button>
<button class="btn btn-md float-right bg-primary">
<i class="fas fa-print text-white">&times</i>
</button>
</div>
</div>
</div>

Answer 1

Please check below code it should work for you
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<style type="text/css">
.gray{
height: 70px;
margin-top: 10px;
padding-left: 20px;
padding-top:10px;
background-color:#eee;
border-style: solid;
border-radius: 5px;
border-width: 1px;
border-color: #337AB7;
}
p.h3 {
display: inline-block;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
line-height: 1.4;
}
.float-right {
float: right;
}
</style>
<div class="container">
<div class="row mt-2">
<div class="col-sm-12 col-lg-4 offset-lg-1 gray">
<p class="h3 text-primary">Annoying text here</p>
<button class="btn btn-md float-right bg-primary" style="margin-left:10px;">
<i class="fas fa-cogs text-white">&times</i>
</button>
<button class="btn btn-md float-right bg-primary">
<i class="fas fa-print text-white">&times</i>
</button>
</div>
</div>
</div>