Bootstrap side by side column with dynamic width-CodePudding

I have a two column box in bootstrap. Both columns expected to be having dynamic content. The second column should be adjacent to the first one. And if the columns width are exceeding the total width of the outer div, the first column should only take the remaining space. Please see the screen shot attached for better clarification.

Expected output

I am using bootstrap 4.6.1 framework in the project. I tried with various method including CSS3 flex, grid etc. This is my code for now,

<div >
  <div >
    <div >
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div >Lorem Ipsum</div>
  </div>
  <br/><br/>
  <div >
    <div >
        <div >
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae distinctio molestias nulla, voluptatum ut nesciunt, in. Deserunt optio inventore animi officia alias cumque incidunt! Alias impedit dolores velit recusandae blanditiis!

        </div>
      </div>
    <div >Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
  </div>
</div>

This is the link to the jsfiddle

But couldn't find a solution. Can any one please help me?

CodePudding user response：

You could add the class flex-nowrap to your rows :

.box {
  border: 1px solid red;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 15px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
  <div >
    <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae distinctio molestias nulla, voluptatum ut nesciunt, in. Deserunt optio inventore animi officia alias cumque incidunt! Alias impedit dolores velit recusandae blanditiis!</div>
    <div >Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
  </div>
  <br />
  <div >
    <div >Lorem ipsum dolor sit amet</div>
    <div >Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
  </div>
</div>