есть у меня одна идея, может с помощью градиента сделать

Можно поиграться с mask-image, поставить градиент linear-gradient(90deg, transparent 50%, black 50%)
И рисовать этот рейндж как слева направо, но как только значение инпута такого достигает середины, просто менять местами черный и прозрачный в градиенте, а инпут рисовать как справа налево. А по центру все время рисовать полоску, а под этим всем делом полупрозрачную полосу эта которая типа как тело инпута

Опередил

да, хорошая идея, спасибо

попробую

Попробовал делать сайт на sass, но кажется по времени ещё больше уходит, особенно когда смотришь в девтулс там написана какая строка, а в sass надо искать где она. Как вы ищете?

source maps

у тебя впереди такой интересный путь, но вопросы правильные, уже хорошо :)

если прям сильно интересно, то можешь почитать про сорсмапы и как их настроить для галпа

будет тебе sass прям в девтулзе

я в какой то древней сборке их юзал, потом меня что то напрягло, наверное долгий билд, отказался.

Дорбый день, не подскажите, как мне выровнять? по зеленой линии

Друзья посоветуйте какуй нить литературу для самых глупеньких с нуля, девушка решила в верстку уйти

Дать правому боку максимально-фиксированную ширину, контейнеру флекс и justify-content: space-between;

html академия. Прям с нуля. Прям просто.

html book

Если даю with: 100%, то врапаются блоки

                <div className="conditions-block">
                    <SA className="conditions" animateIn="show-text">
                        <div className="conditions-title">KSh 500&nbsp;–&nbsp;KSh 70,000</div>
                        <div className="conditions-text">Loan Amount</div>
                    </SA>
                    <SA className="conditions" animateIn="show-text">
                        <div className="conditions-title">70&nbsp;-&nbsp;720 days</div>
                        <div className="conditions-text">Loan Term</div>
                    </SA>
                </div>
                <div className="conditions-block">
                    <SA className="conditions" animateIn="show-text">
                        <div className="conditions-title">From 28% to 220.5%</div>
                        <div className="conditions-text">APR</div>
                    </SA>
                    <SA className="conditions" animateIn="show-text">
                        <div className="conditions-title">None</div>
                        <div className="conditions-text">Service fee</div>
                    </SA>
                </div>

Вот разметка блоков, все на флексбоксах

width: 100% - это один блок растянуть на всю строчку. А тебе нужно в пикселях или процентах высчитать правый блок и задать такую ширину

Правый блок имеешь в виду этот?