How to aligning Pill items and generally improve my code? - html

Question

I'm building my own Pill component using HTML:
.panel1 {
width: 100%;
}
.panel2 {
width: 100px;
}
.pill {
display: inline-block;
}
.pill-content {
display: flex;
flex-direction: row;
font-size: 12px;
vertical-align: middle;
padding: 0px;
background-color: white;
border: solid;
border-width: 1px;
border-radius: 4px;
color: black;
border-color: blue;
background-color: white;
}
.pill-text {
flex: 1;
}
.pill-icon {
flex: 1;
max-width: 18px;
padding: 0px 5px 0px 5px;
}
<div class="panel1">
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Why is that text breaking as it fits in width?
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
</div>
<div class="panel2">
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Test
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Very big text that does not fit in width
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
<div>
</div>
My problems:
I need to position text always on the left side of the Pill.
I need to keep the close icon (I´m using an X here but that will be a font awesome icon) always vertically centered.
I can´t see why my text is breaking on panel1. I expected the text to break only when the panel size is smaller that text + icon.
Can I make that HTML/CSS simpler?
JSFiddle here

Answer 1

I've made some modifications to your code to give you the desired result:
/* recommended */
.panel1 *,
.panel2 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.panel1 {
/*width: 100%; by default*/
}
.panel2 {
width: 100px;
}
.pill {
display: inline-flex; /* modified, since you're using flexbox */
}
.pill-content {
display: flex;
/*flex-direction: row; by default*/
font-size: 12px;
/*vertical-align: middle; has no effect here*/
align-items: center; /* now its vertically centered */
/*padding: 0; already covered*/
border: 1px solid blue; /* shorthand */
border-radius: 4px;
}
.pill-text {
/*flex: 1; not necessary, the culprit for breaking*/
}
.pill-icon {
/*flex: 1; not necessary since you're using max-width*/
max-width: 18px;
padding: 0 5px;
text-align: center; /* for horizontal alignment */
}
<div class="panel1">
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Why is that text breaking as it fits in width?
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
</div>
<div class="panel2">
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Test
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Very big text that does not fit in width
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
</div>

Answer 2

Here are some simplification tips (as I cannot comment):
For all values that are 0, you can drop the units (px, etc.)
You can shorten your code by using the border shorthand: border: 1px solid blue. Luckily there's no need to specify each attribute individually
background-color: white; is specified twice for .pill-content, unless I'm missing something.