так как нужно чтоб и некоторые старые браузеры поддерживали решение
В вопросе об этом ни слова. Было бы логично такое требование туда добавить (все толкают вас к флексу не потому, что вредные, а потому, что по умолчанию считают только IE11, максимум IE10 достойными полноценной поддержки - если нужны старые браузеры - это нужно уточнить).
Гарес Антонович: Мне кажется в наше время про префиксы можно отдельно не говорить - у всех должен быть автопрефиксер (кстати по ссылке, которую я дал, есть информация о необходимых префиксах). Да, и не поделитесь, какой IE вы поддерживаете (просто из любопытства - вы говорите, что не используете флексбокс из-за него, я сам делаю все для IE11+ и там он вполне работает).
Гарес Антонович: Во-первых не 58, а 70. Во вторых - если эта функциональность является (по какой-то причине) критичной и пользователи ie без нее жить не могут - можно подставить полифилл, который будет в 50 раз меньше jquery и не потребует никаких лишних действий.
Лобстер: Вы не сказали, что вы хотели в конечном итоге получить. Сказали "я сделал вот так и оно работает не так, как я ожидал". Какую помощь вы расчитывали получить?
Иван: Затрудняюсь ответить, я к подобным трюкам пришел постепенно методом научного тыка - смотрел демки на CodePen, брал какие-то идеи, делал свои (там часто люди делают что-то "потому, что могут" - извращают какую-нибудь технологию до неузнаваемости и по чистой случайности получают полезный результат). Порекомендовал бы и вам регулярно следить за новыми и популярными демками и собирать идеи оттуда.
Вы хоть понимаете абсурдность вопроса? Есть самые разные направления разработки - кто-то делает сайты, кто-то мобильные приложения а кто-то ПО для медицинского оборудования и микроволновок. И везде требования разные. Конкретизируйте свой вопрос (или он бысто исчезнет по причине "слишком общий / ответ легко ищется поисковиком").