Bootstrap auto column width but all columns still use 100% of parent width-CodePudding

I have a <div> with two columns. (I use two columns so I can left-align the left column and right-align the right column.)

<div >
    <div >
        <div >
            <img src="~/images/ttexpand.png"  />
            Dates and ETAs
        </div>
        <div >
            <img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
        </div>
    </div>
</div>

But one column can hold a lot more content than the other, and I'm not sure how much more. So I'd like the columns to resize if needed, giving more width to the column with more content.

To that end, I found the col-md-auto class.

<div >
    <div >
        <div >
            <img src="~/images/ttexpand.png"  />
            Dates and ETAs
        </div>
        <div >
            <img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
        </div>
    </div>
</div>

This correctly gives more width the the column with more content. However, the two columns together no longer use up 100% of the width of the parent.

Is there any way to have the two columns together use up all available width but still give more width to columns with more content? Maybe similar to the way I can set the width of a table, but then the column widths are automatic?

CodePudding user response：

Use this instead.

<div >
    <div >
        <div>
            <img src="~/images/ttexpand.png"  />
            Dates and ETAs
        </div>
        <div>
            <img id="edit-etas" src="/images/ttedit.png" title="Edit ETA Dates">
        </div>
    </div>
</div>

It will work for you.