Same width with Flexbox - html

Question

I have the following part. I already tried to do it, but so far without any success.
.container {
width: 600px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 1</span>
</div>
<span class="label-text">Small Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 2</span>
</div>
<span class="label-text">longer Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 3</span>
</div>
<span class="label-text">Soo long Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 4</span>
</div>
<span class="label-text">Text</span>
</label>
</div>
</div>
</div>
Sadly I'm not able to modify the structure. There are sooo much JS using the structure. But I can edit the CSS. I'm absolutely not experienced with flex box.
The text in the span.label-text elements can be any long but can't be longer than the half of it's parent width.
Its a plugin and its used in many parts. I can't just define a fix width.
Is it possible to make all span.label-text elements as wide as the one with the longest text without modifying the html or using JS for it?

Answer 1

Here is jQuery example with check label-text max width in all items and apply width to all label-text.
var width =0
jQuery('.item').each(function() {
if(width <= jQuery(this).children(".label-text").outerWidth())
{
width = jQuery(this).children(".label-text").outerWidth();
}
});
jQuery(".label-text").css('width',Math.ceil(width));
body { margin:0; padding:0;}
.container {
width: 600px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 1</span>
</div>
<span class="label-text">Small Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 2</span>
</div>
<span class="label-text">longer Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 3</span>
</div>
<span class="label-text">Soo long Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 4</span>
</div>
<span class="label-text">Text</span>
</label>
</div>
</div>
</div>

Answer 2

Since you're using Flexbox, you can play around with the flex values of both flex-items of the .item element, e.g.:
.container {
width: 600px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
flex: 2; /* added; makes it twice as wide as the .label-text */
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
flex: 1; /* added */
align-items: center;
justify-content: center; /* added */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 1</span>
</div>
<span class="label-text">Small Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 2</span>
</div>
<span class="label-text">longer Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 3</span>
</div>
<span class="label-text">Soo long Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 4</span>
</div>
<span class="label-text">Text</span>
</label>
</div>
</div>
</div>

Answer 3

You can define a width for that label-text.
.container {
width: 600px;
}
.label-text {
width: 150px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 1</span>
</div>
<span class="label-text">Small Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 2</span>
</div>
<span class="label-text">longer Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 3</span>
</div>
<span class="label-text">Soo long Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 4</span>
</div>
<span class="label-text">Text</span>
</label>
</div>
</div>
</div>