Break letters of second child div

Question

I have one requirement, where I need to apply width to the parent element which is equal to the first child element\'s width. This can be easily achieved using display

Answer 1

Important this answer may not be useful for you, but can help other user who have a similar problem.

you can have the same look as you desire, but without really stretching the parent height. by using position:absolute; on the second div.

Notice: if the parent don't really stretch, it causes problems. for example, content that will come directly after the parent, will be showed after the .first element. causing an overlap.

you still can use this for cases where this is the only content in the page, and you want the second div to adjust his width to the first.

(I don't think that this is your case, but maybe it will help other user who might stumble into that question.) anyway, I think that your only option is to use a Script.

For those who fall under the use-case I've described, Here's a Working Fiddle

HTML: (no changes here)

    
First div set the width
    
second fiv should wrap if bigger then first

CSS:

.main
{
    display: inline-block;
    position: relative;
}
.first
{
    background-color: gray;
}
.value
{
    position: absolute;
    background-color: cornflowerblue; /* moved here */
}