Aleksey111

Возьмем явную закономерность: При увеличении радиуса в 2 раза все остальные условия для расчетов увеличиваются в 2 раза.
Далее введем минимальный шаг радиуса N = 5 пикселей.
Далее представим что ваш рисунок находится на осях Х-У.
Проводим визуальную линию под углом 45 градусов к осям координат.
На пересечении этой прямой с окружностью получаем точку равно удаленную от оси Х и оси У одновременно (Sin=Cos= ([корень_квадратный] 2)/2 = 0,7071067811865475 => точка A
Далее предположим что радиус R=N*x, где х - натуральное число.
Кол-во квадратиков по 1 пикселю (те что находятся максимально близко к точке равноудаленной от осей Х и У) равно значению х (видно из рисунка).
т.е. при радиусе 5 пкс х=1 - квадратиков 1, при радиусе 10 пкс х=2, квадратиков 2 и т.д.
Для каждого х нечетного получаем что кол-во квадратиков нечетное, для х четного - четное.
Вывод равноудаленная точка при х нечетное совпадает со средним в линии квадратиком в 1 пиксель, при х четная - ближайшие квадратики находятся 1-й на клетку ниже, 2-й в клетке справа.
Т.е. для точки Ах при х нечетном получаем координаты первого пикселя для закраски:
Ах_нечетн=[N*x;N*x],
а для Ах_четн таких точек будет уже 2:
Ах_четн_1=[N*x-1;N*x], Ах_четн_2=[N*x;N*x-1].

Следующий шаг: достраиваем все точки по 1 пикселю, по условию что точки делятся оставшиеся на 2 равные части. Последующая группа удаляется соотвественно от Ах_четн_1 и Ах_четн_2 (или от Ах_нечетн) по принципу увеличиваем координату х на 1, уменьшаем координату у на 1 для группы точек привязанных к Ах_четн_1=[N*x-1;N*x]; уменьшаем координату х на 1, увеличиваем координату у на 1 для группы точек привязанных к Ах_четн_2=[N*x;N*x-1] (ну или для 1 и второй группы при точке Ах_нечетн=[N*x;N*x].

Далее понимаем {чита считаем} сколько блоков 1хНесколько пикселей мы еще дорисовываем.

Тут действуют следующие закономерности:
начинается с 1 блока в 2 пикселя с каждой стороны,
Блок в 3 пикселя добавляется при увеличение радиуса в 2 раза,
Блок в 4 пикселя - при увеличении еще в 2 раза.
т.е. закономерность блок длинной 1хC появляется при выполнении условия что радиус Rс=N^C, С - целое.

Оставшиеся блоки считаем по принципу:
для блока 1х2 - кол-во с каждой стороны = (Rокр-Rс(предыдущий меньший))/N. Если Rокр=Rс, то колв-во блоков 1х2 берем из радиуса N-1.
блок 1х3 = (Rокр-Rс(предыдущий меньший))/(2*N)
Если Rокр=Rс, то колв-во блоков 1х2 берем из радиуса N-1 и вычитаем 1 блок.
для 1х4 = (Rокр-Rс(предыдущий меньший))/(2*N).
Если Rокр=Rс, то колв-во блоков 1х2 берем из радиуса N-1 и вычитаем 2 блока.

И т.д.

Знаю что замудренно написал но думаю если переложить это в код будет проще.

P.S. помним что блок длинной 1хC появляется при выполнении условия что радиус Rс=N^C, С - целое. и длиннее значения С блоки быть не могут.

Во-первых, инлайн блоки это не очень круто, тем более для отзывов с динамичной высотой.

Самый просто пример рассмотрим на сетке bootstrap:
1. Есть контейнер .row
2. В него помещается два блока с float:left
3. Добавляются свойства:

.row:after {
    content: " ";
    display: table;
    clear:both
}
.row:before {
    content: " ";
    display: table;
}

Это делается для, того чтобы убрать обтекание, раньше использовали clearfix,

Структура имеет вид:

<div class="row">
    <div class="col-md-6">Текст</div>
    <div class="col-md-6">Текст</div>
</div>

Вместо «Текст» вставляется обычный блок с вашим отзывом. И все, ваша салянка из float, inline никуда не годится. Инлайн блоки нужно использовать если заведомо известно, что элементы будут одинаковой высоты, например кнопки. Плюс при добавлении text-align:center, такие кнопки будут вести себя как обычный текст, т.е отображаться по центру. Очень удобно.

Чтобы проще было освоить - ознакомьтесь с Bootstrap. Очень простой инструмент, в любом случае вы будете писать то, что там уже давно написано.

<div><span>$</span><span>25</span><sub>Monthly</sup></div>

У вас тег sub только открывается, а тег sup только закрывается, причем по всей видимости не там, где должен - что-то тут не так...

<div class="button"><button>ENROLL TODAY</button></div>

Не нашел ни одной причины почему кнопка обернута в div с классом button - почему бы не применять стили к ней самой? И почему бы не трансформировать текст к верхнему регистру с помощью text-transform: uppercase (это относится и к заголовкам)?

div.outer div.inner ul li:nth-of-type(2n)

Наверху правильно заметили - используйте только классы (.outer .inner вместо div.outer div.inner). Также стоит отметить, что селекторы с такой глубокой вложенностью - зло. Разбивайте все на меньшие компоненты и почитайте про BEM или что-то еще в этом духе.

color: #2F4F4F;
color: white;
background-color: #f5f5f6;

Определитесь как задавать цвета - верхний и нижний регистр в сочетании с переодическими вкраплениями названий цветов создает невероятную кашу. Почитайте про препроцесоры (для начала про LESS - он самый простой) и начните использовать переменные.

font-family: 'Trebuchet MS';
width: 300px;
min-height: 470px;
font-family: 'Trebuchet MS';

Повторение - мать заикания. А если серьезно - постучите дизайнеру клавиатурой по голове, чтобы не использовал платные шрифты из Windows (без них у меня под линуксом ваша карточка выглядит как...)

Набросал демку на codepen с примером использования переменных в LESS, именованием классов в соответствии с rscss и вообще всякими фишками, которые могут быть вам полезны (значения всего брал на глазок, тестировал только в Chrome, но по идее должно работать IE11+).

1) Не указывайте в селекторе тег. Пример: div.outer div.inner
2) Если значение 0, то опускайте единицы измерения. Пример: 25px 0px 25px 0px
3) Сокращайте свойства. Пример: padding: 25px 0px; - Если нужно задать только верхний и нижний отступы.
4) Старайтесь не использовать в селекторах пустые теги. Например: div.outer div.inner div span. div и span могут измениться и на их место поставлены другие теги. От чего верстка сломается. Давайте тегам осмысленные классы. Читать проще, поддерживать код легче. А так же сократится селектор

Зачем вам вообще абсолютное позиционирование в этом случае?
Таким позиционированием вы выводите дочерний блок из потока.

Можно так:
https://jsfiddle.net/v8v1nuum/
Можно флексами

button, 
button:active, 
button:focus {
    outline: none;
}