how to wrap text while keeping border in CSS - html

Question

so I've created a snippet of layout that I'd like to re-use in various places in my code. JSFiddle with what it looks like normally with the following dom structure: https://jsfiddle.net/64x9udcr/
<a class="stamp">
<div class="stamp-left"><span>0023f23f2</span></div>
<div class="stamp-right"><span>The quick brown fox jumped over the lazy dog</span></div>
</a>
Basicly an identifier on the left, with a description on the right, not too complicated. It's also inline, so it can be included in a line of text like an identifier.
Ex:
What I'm having trouble with is getting it to wrap if necessary. The following is an image of what I'd like to happen when wrapping is needed. A would be preferred, but if not possible, then B.
Any pointers as to what combination of CSS I should be using?

Answer 1

Used flex method with few little changes in your code.
https://jsfiddle.net/64x9udcr/2/
.label,
.stamp {
border-radius: 0.25em;
color: rgb(255, 255, 255);
display: inline;
font-size: 75%;
font-weight: bold;
line-height: 1;
padding: 0.2em 0.6em 0.3em;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
}
.stamp {
border: 1px solid rgb(218, 218, 218);
color: inherit;
display: inline-block;
font-size: inherit;
font-weight: inherit;
margin-bottom: 0.1em;
padding: 0;
}
.stamp .stamp-left,
.stamp .stamp-right {
display: inline-block;
padding: 0.2em 0.6em;
}
.stamp .stamp-left {
background: rgb(218, 218, 218) none repeat scroll 0 0;
font-family: "courier";
}
.select2-results__option--highlighted .stamp .stamp-left {
color: rgb(51, 122, 183);
}
a.stamp:hover {
border-color: rgb(35, 82, 124);
}
a.stamp:hover .stamp-left {
background-color: rgb(35, 82, 124);
color: rgb(255, 255, 255);
}
a.stamp:hover .stamp-right {
color: rgb(35, 82, 124);
}
.container {
display: flex;
width: 100%;
}
.stamp {
max-width: 100%;
overflow: hidden;
min-width: 200px;
}
<div class='container'>
<a class="stamp">
<div class="stamp-left"><span>0023f23f2</span>
</div>
<div class="stamp-right"><span>The quick brown fox jumped over the lazy dog</span>
</div>
</a>
</div>