0

I have a simple DIV container that has 2 div child elements in it. I want the 1st element to set the width of the parent container, and the 2nd element to fit the available width.
I have this simple JSFiddle that shows my attempts. I want the red element's width to match the blue one.

<div class="container">
  <div class="first">
    first element
  </div>
  <div class="second">
    second element with more characters
  </div>
</div>

Maybe a different layout will help me get what I want, or some specific css trick. I'd be happy with anything that might work.

Noam Gal
  • 3,315
  • 3
  • 36
  • 53

2 Answers2

1

A style is added to the parent element display: table;

On the second child element is added display: table-caption; and caption-side: bottom; so as not to stand in the first position.

It is not necessary to add style to the first child element, but I have added it display: inline;

I hope I have been helpful

.container {
    background-color: green;
    display: table;
}

.first {
    background-color: blue;
    display: inline;
}

.second {
    background-color: red;
    display: table-caption;
    caption-side: bottom;
}
<div class="container">
    <div class="first">
        first element dfsf fd ssdf g
    </div>
    <div class="second">
        second element with more characters
    </div>
</div>
54ka
  • 3,501
  • 2
  • 9
  • 24
-1

yes it is possible that you make the row into add the class no-gutters and col-div put into an other class p-0 i think your will be solve the matter.

or your first child div into add the new classes p-0 and no-gutters thanks

Khalid Hussain
  • 7
  • 1
  • Welcome to SO. I do not see that your anwser is related in any way to the OP's problem. Also I got no idea what you talking about but again its not related to the original problem in the first place. – tacoshy Oct 29 '20 at 14:25