How to align items in second (and further) column, so that the changing value (increasing characters) do not push - css

Question

I have a pretty specific question: I'm building something like a simple flat table (I don't use table itself because of rounded borders issue).
I'm using unordered list here and the problem is that I can't figure out how to align items in the second column, taking into account that the content should be dynamic (e.g. changing numbers).
Here's the markup for one row:
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
And CSS:
.ktbl_head {
padding: 15px 0 0 0;
height: 100%;
background-color: #ebe7e7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ktbl_head ul li {
display: inline;
padding-right: 135px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
color: #888888;
}
.ktbl_mid_wht {
background-color: #ffffff;
height: 100%;
padding: 20px 0 0 0;
}
.ktbl_mid_wht ul li {
display: inline;
text-align: left;
padding-right: 90px;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
color: #888888;
}
Thanks for your attention!

Answer 1

here is my implementation on aligning the table without the table tag:
HTML
<div class="container">
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
CSS
.container {
border-radius: 10px;
border: 1px solid rgb(200,200,200);
overflow: hidden;
}
section {
font-family: "Open Sans", sans-serif;
width: 100%;
}
section:nth-child(2n+1) {
background-color: #ebe7e7;
}
section ul {
padding: 0;
margin: 0;
height: 65px;
}
section ul li {
width: 45%;
line-height: 65px;
display: inline-block;
}
section ul li:first-child {
padding-left: 35px;
}
Result
Explanation
You see, in the HTML, I added a new div as a container to create the curved corner with border-radius (the overflow: hidden needs to be used so that the content is encapsulated by the container).
For the CSS, section maintains general property such as font-family. Furthermore, section:nth-child(2n+1) is used to create background-color every other element starting with 1st,3rd,5th,... element. The selectors section ul, section ul li, and section ul li:first-child are used to make the CSS selectors more semantic (it makes clean code and easy to maintain in the future). Please see the code below for the demo. Happy coding!
PLAYGROUND

Answer 2

Give all the li's a width in which all of the content-length will fit..