Bootstrap card - width should fit content of child-CodePudding

Following example:

<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >Status</div>
            <div >
                TestTestTestTestTestTestTestTestTestTestTestTestTest
            </div>
          </div>
        </div>
      </div>
    </div>
    <div >
      Main Content
    </div>
  </div>
</div>

Results in:

I would like the width of the card to fit the content. How to achieve this?

Update1 - Answer to @Dimitar Cetelev When i remove d-flex ist just breaks the content:

Update2

Changing to col-auto works well. But now the columns wont have the same width:

<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >Status</div>
            <div >
              StatusStatusStatusStatusStatusStatusStatusStatusStatusStatus
            </div>
          </div>
          <div >
            <div >Workflow</div>
            <div >
              WorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWork
            </div>
          </div>
          <div >
            <div >API</div>
            <div >
              ApiApiApiApiApiApi
            </div>
          </div>
        </div>
      </div>
    </div>
    <div >
      Main Content
    </div>
  </div>
</div>

Results in:

Desired outcome without setting width of card to a fix-px:

CodePudding user response：

Remove d-flex class

<div >Status</div>
 <div >
 TestTestTestTestTestTestTestTestTestTestTestTestTest
</div>

CodePudding user response：

Replace class col-5 and col-7 with col-auto.

<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >Status</div>
            <div >
                TestTestTestTestTestTestTestTestTestTestTestTestTest
            </div>
          </div>
        </div>
      </div>
    </div>
    <div >
      Main Content
    </div>
  </div>
</div>

Update 1

Reverted the changes from previous update.

Remove d-flex class and add style="width:inherit"

<div >
  <div >
    <div >
      <div  style="width:inherit">
        <div >
          <div >
            <div >Status</div>
            <div >
              StatusStatusStatusStatusStatusStatusStatusStatusStatusStatus
            </div>
          </div>
          <div >
            <div >Workflow</div>
            <div >
              WorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWork
            </div>
          </div>
          <div  style="width: inherit;">
            <div >API</div>
            <div >
              ApiApiApiApiApiApi
            </div>
          </div>
        </div>
      </div>
    </div>
    <div >
      Main Content
    </div>
  </div>
</div>

Please note for smaller viewports, The card will contain the content by breaking the text if it is lengthy. This will avoid horizontal scrolling.