Button into bulleted list - css

Question

I am creating a pricing table, I would like to add a button into a <li></li> with a small word, the problem is that my elements are not placed correctly.
If I use a <br /> the problem is solved, but I looking for a better solution please.
<li>1000 Email Boxes <br/>
<button>Add to Cart</button>
</li>
.flex-container {
width: 70%;
display:flex;
justify-content:center;
align-items:center;
flex-wrap : wrap;
margin: 0 auto;
}
.flex-item {
flex: 10;
width: 0;
}
.flex-item:not(:last-child) {
margin-right: 1em;
}
.package {
border: 1px solid ;
list-style-type: none;
margin: 0;
padding: 0;
transition: 0.25s;
}
.package .header {
background-color: #F4B7DB;
color: #fff;
font-size: 1.5em;
}
.package .highlight {
background-color: #29b6f6;
}
.package li {
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 1.2em;
text-align: center;
}
button {
background-color: #29b6f6;
border: none;
border-radius: .15em;
color: #fff;
cursor: pointer;
padding: .75em 1.5em;
font-size: 1em;
}
<div class="flex-container">
<div class="flex-item">
<ul class="package">
<li class="header">Basic</li>
<li>20GB Storage</li>
<li>100 Domains</li>
<li>1TB Bandwidth</li>
<li>1000 Email Boxes <br/>
<button>Add to Cart</button>
</li>
</ul>
</div>
</div>

Answer 1

Wrap your text with block DOM such as div
.flex-container {
width: 70%;
display:flex;
justify-content:center;
align-items:center;
flex-wrap : wrap;
margin: 0 auto;
}
.flex-item {
flex: 10;
width: 0;
}
.flex-item:not(:last-child) {
margin-right: 1em;
}
.package {
border: 1px solid ;
list-style-type: none;
margin: 0;
padding: 0;
transition: 0.25s;
}
.package .header {
background-color: #F4B7DB;
color: #fff;
font-size: 1.5em;
}
.package .highlight {
background-color: #29b6f6;
}
.package li {
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 1.2em;
text-align: center;
}
button {
background-color: #29b6f6;
border: none;
border-radius: .15em;
color: #fff;
cursor: pointer;
padding: .75em 1.5em;
font-size: 1em;
}
<div class="flex-container">
<div class="flex-item">
<ul class="package">
<li class="header">Basic</li>
<li>20GB Storage</li>
<li>100 Domains</li>
<li>1TB Bandwidth</li>
<li><div>1000 Email Boxes</div>
<button>Add to Cart</button>
</li>
</ul>
</div>
</div>