Как добавить пространство между двумя элементами шириной 60% + 40%? ⇐ CSS

[Anonymous]

Трудно объяснить в заголовке, поэтому я уточню. Очевидно, я понимаю, что между двумя элементами, равными 100% ширины контейнера, нельзя добавить дополнительное пространство, но мне интересно, есть ли способ уменьшить ширину одного из них на 40 пикселей.

Я вполне уверен, что мог бы сделать это в JavaScript, если это необходимо, но если доступно более простое решение CSS, я бы предпочел использовать его.

Для дальнейшего объяснения я бы хотел 40 пикселей между двумя белыми элементами, показанными на этом изображении: https://gyazo.com/551af056aa516eac2ce3c7b16949a0fa

Как видите, у меня есть большой контейнер с левым и правым столбцом шириной 40% и 60% соответственно.

HTML:















CSS:

.homeContentContainer {
position: absolute;
width: 60%;
margin: 0 auto;
top: 70px;
left: 0px;
right: 0px;
}

.leftCol {
width: 40%;
height: 100%;
float: left;
}

.rightCol {
width: 60%;
height: 100%;
float: right;
}

.buyPanel {
width: 100%;
height: 230px;
margin: 40px 0 0 0;
}

.sellPanel {
width: 100%;
height: 230px;
margin: 40px 0 0 0;
}


Подробнее здесь: https://stackoverflow.com/questions/455 ... 0-40-width