How to break col when text is too large? - html

Question

I have a row with two cols:
a) For the name of the list
b) For an edit button.
col-md-6 works great for when the list's name is short, but when is longer it renders clunky.
Clunky:
html
<div class="row">
<div class="col-md-6">
<h1 class="box">Lista: {{ lista.name }}</h1>
</div>
<div class="col-md-6">
<button id="editList" class="btn btn-primary">Editar</button>
</div>
</div>
<hr>
It gets worse for mobiles, where the list's name should be on top of the button "Editar".

Answer 1

if you use bootstrap
<div class="row">
<div class="col-md-8 col-sm-6">
<h1>welcome to my blog</h1>
</div>
<div class="col-md-4 col-sm-6>
<button class="btn">hello</button>
</div>
</div>
just css
<div class="contains">
<div class="text">
<h1>welcome to my blog</h1>
</div>
<div class="button>
<button class="btn">hello</button>
</div>
</div>
<style>
.contains {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text{
width: 60%;
}
.button{
width: 40%;
}
</style>

Answer 2

add (col col-md-6) not (col-md-6)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col col-md-6">
<h1 class="box">Lista: Mi Primary List</h1>
</div>
<div class="col col-md-6">
<button id="editList" class="btn btn-primary">Editar</button>
</div>
</div>
<hr>