Custom widget for displaying value and information
I am trying to implement a widget that looks something like this: 
The idea is that I have value and it has additional information. The problem is that this widget has to authorize the width of the value, but not the width of the additional information. The extra piece of information allows you to fill as much space as it wants downward and wrap the content.
So far I have this , however the problem with this is that the extra information does not take into account the height of the widget, so if it is larger, it overflows on top of the thing below it or does not expand the containing div.
Please, help
source to share
After a lot of searching, I think the issue is related to position:absolute
, and so far the recommendation I've read is to handle it via JS. I'm not sure if this is acceptable to you, but I was able to solve it here:
https://jsfiddle.net/anut12tp/5/
Basically, I set the inner range to absolute, but on load, I call JS to set the max width to its parent, then change its display to inline-block and position to relative.
Please take a look and let me know if this works for you. Thank you.
source to share
Do you mean this? display: inline-block;
and position:absolute;
for the parent and the position:absolute;
information item it seems to be doing the trick.
#wrapper{
display: inline-block;
height:100%;
position:relative;
}
#header, #info{
border:black 2px solid;
}
#info{
position:absolute;
}
<div id="wrapper">
<div id="header">Value xyz</div>
<div id="info">Info Info Info Info Info</div>
</div>
source to share
Here is your modified version of what you shared in your post.
You can try this:
.container {
display: block;
position: relative;
background: aliceblue;
width: 200px;
}
.maxim {
position: relative;
width: 100%;
max-width: 100%;
background-color: lime;
}
<div class="container">
<header>
<strong>12345620</strong>
<span>description</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum
</span>
</div>
<div class="container">
<header>
<strong>1234567890</strong>
<span>more text is here</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
source to share