Позиция sticky для двух дивов внутри одного при различном наполнении?

Question

[Za Za]

конструкция

<div class="all">
 <div class="one">
   фото
 </div>
 <div class="two">
   текст
 </div>
 <div class="next">
   табы
 </div>
</div>

на десктопе
.one float: left + 50%ширина и фото продукта (от 1 до бесконечности) фото идут друг под другом
.two float: right + 50%ширина и описание (от пары символов до бесконечности)
.next - остальные дивы 100% шириной

пытаюсь понять, как при скролле зафиксировать (sticky) один из div(.one/.two) c высотой меньшей до .next

Comments

[imko]

Для начала забудь что такое float

[Za Za]

imko, забыть не выйдет, но изменить стиль могу (дочерняя тема с минимум вмешиваний)
изменить структуру хтмл тоже не вариант (слишком много при этом нужно будет учитывать для других продуктов)

[Ankhena]

Что-то последнее время все вопросы про sticky сводятся к следующему:

- как мне сделать sticky (при этом автор в явном виде знает это слово)
- использовать sticky
- а, точно!

Так и что у вас там не работает после применения sticky?

[Za Za]

Ankhena,
хтмл трогать нельзя
js тоже
можно играться только css
результат нужнен

[Ankhena]

Михаил Лебедев, https://jsfiddle.net/w687mzg4/

[Za Za]

Ankhena, почти что нужно, НО нижний блок странно себя ведет при этом
если в него воткнуть текст то появляется наезд блоков друг на друга

[Ankhena]

Михаил Лебедев, вы там с флоатами clearfix разберитесь нормально.

[Za Za]

Ankhena, а что с ними не нормально? чет еще больше запутали

[Ankhena]

Михаил Лебедев, не, я не то подумала.

Значит, придется на js выяснять, которых из блоков меньше и задавать sticky только ему.
Или поменять разметку (хоть тем же js).