CSS for dynamically placing HTML with unfixed columns?

Question

I want to set such a layout so that both columns are dynamic: one of them is set second in the first column and the minimum width. I found many solutions where the column is fixed with width, but it does not solve this problem.

See what I want to achieve on the screen.

What CSS should I use?

Answer 1

There are different approaches to such things ... a simple way would be to use display: table; for container display: table-cell; for childs and width: 1px; for the first child.

I made a fiddle for you:

http://jsfiddle.net/TfuTE/

Answer 2

check it out

http://codepen.io/Parthmy007/full/HKJuj

use Display: "table-cell" on both columns or set the maximum width and minimum width. And set the width of the first column to "auto".