Left align title with input boxes flexbox - html

Question

I was wondering whether there is a better way (more dynamic) way of left aligning the title with the input boxes below it using flexbox. The input boxes need to be displayed inline with the title above them. Currently I've had to wrap a div around both the title and input boxes and set a fixed pixel width. Is there a better way of achieving the same result with flexbox?
I've tried using inline-flex on this wrapper but it's still treating it as a full width element instead of being as wide as its content. I've also tried setting inline-flex on the unordered list and the result is exactly the same.
I would like to not have to set a fixed pixel width. The next time if I need to do the same but with a different element, I would need to keep setting a fixed pixel size which isn't ideal.
Thanks in advance
html {
font-size: 14px;
}
.section {
padding: 1.5rem;
}
.wrapper {
display: flex;
background: lightblue;
}
.warning-percentage-wrapper {
background: lightcoral;
flex: 0 0 30%;
}
.warning-percentage {
display: inline-flex;
margin-left: -1rem;
}
.warning-percentage li {
flex: 0 1 80px;
margin-left: 1rem;
}
.days-of-week-wrapper {
background: lightseagreen;
flex: 1;
display: flex;
justify-content: flex-end;
}
.inline-wrapper {
background: pink;
display: flex;
flex-direction: column;
flex: 0 1 644px;
}
.days-of-week {
display: inline-flex;
margin-left: -1rem;
}
.days-of-week li {
flex: 0 1 80px;
margin-left: 1rem;
}
<section class="section">
<div class="wrapper">
<div class="warning-percentage-wrapper">
<h5 class="title is-5">Warning Percentages</h5>
<ul class="warning-percentage">
<li>
<label class="label">Low</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Medium</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">High</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
<div class="days-of-week-wrapper">
<div class="inline-wrapper">
<h5 class="title is-5">Days of Week</h5>
<ul class="days-of-week">
<li>
<label class="label">Monday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Tuesday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Wednesday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Thursday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Friday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Saturday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Sunday</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
</div>
</div>
</section>

Answer 1

if you want something as same as the pic you put in your question, you must remove padding/margin from your elements (such as input, label)
html {
font-size: 14px;
}
.wrapper {
display: flex;
background: lightblue;
}
.warning-percentage-wrapper {
background: lightcoral;
}
.warning-percentage {
display: inline-flex;
}
.warning-percentage li {
flex: 0 1 80px;
margin-left: 1rem;
}
.days-of-week-wrapper {
background: lightseagreen;
flex: 1;
display: flex;
justify-content: flex-end;
}
.inline-wrapper {
background: pink;
display: flex;
flex-direction: column;
}
.days-of-week {
display: inline-flex;
}
<section class="section">
<div class="wrapper">
<div class="warning-percentage-wrapper">
<h5 class="title is-5">Warning Percentages</h5>
<ul class="warning-percentage">
<li>
<label class="label">Low</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Medium</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">High</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
<div class="days-of-week-wrapper">
<div class="inline-wrapper">
<h5 class="title is-5">Days of Week</h5>
<ul class="days-of-week">
<li>
<label class="label">Monday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Tuesday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Wednesday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Thursday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Friday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Saturday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Sunday</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- end snippet -->

Answer 2

The problem I'm having with inline-flex is caused using a flex basis with a pixel value. I needed the inputs to all be the same width. I forgot to mention I am using Bulma (not by choice) which removes all the margins and padding's from elements by default.
My example below should hopefully provide a better understanding of the problem. Notice I've set the UL - 'days-of-week' to align-self. Now the UL is as wide a its content which is what I wanted. However if you hover over the element with your dev tools there's still quite a bit of space remaining. This is because I'm using a flex-basis with a pixel value. If you set to LI to flex: 1 and inspect the DOM, the elements are nicely fill the space, including the margins.
The solution for this is to remove the flex styles altogether on the LI elements and set a fixed pixel width on the 'inline-wrapper' element. I don't think this is ideal but it allows you to control the size of the LI's without needing additional css styling on the LI's themselves.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="bulma-0.8.0/css/bulma.min.css" rel="stylesheet" />
<style>
html {
font-size: 14px;
}
.section {
padding: 1.5rem;
}
.wrapper {
display: flex;
background: lightblue;
}
.warning-percentage-wrapper {
background: lightcoral;
flex: 0 0 30%;
}
.warning-percentage {
display: inline-flex;
margin-left: -1rem;
}
.warning-percentage li {
flex: 0 1 80px;
margin-left: 1rem;
}
.days-of-week-wrapper {
background: lightseagreen;
flex: 1;
display: flex;
justify-content: flex-end;
}
.inline-wrapper {
background: pink;
display: flex;
flex-direction: column;
flex: 0 1 644px;
}
.days-of-week {
display: inline-flex;
align-self: flex-start;
}
.days-of-week li {
flex: 0 1 80px;
margin-left: 1rem;
}
.days-of-week li:first-child {
margin-left: 0;
}
</style>
</head>
<body>
<section class="section">
<div class="wrapper">
<div class="warning-percentage-wrapper">
<h5 class="title is-5">Warning Percentages</h5>
<ul class="warning-percentage">
<li>
<label class="label">Low</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Medium</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">High</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
<div class="days-of-week-wrapper">
<div class="inline-wrapper">
<h5 class="title is-5">Days of Week</h5>
<ul class="days-of-week">
<li>
<label class="label">Monday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Tuesday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Wednesday</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>