Как обтянуть текстовый блок и притянуть кнопку?

Question

Артём @foowee800

HTML
CSS

Как обтянуть текстовый блок и притянуть кнопку?

Есть блок с декстом и он разворачивается после нажатия кнопки "читать далее"
Хочется сделать кнопку сразу под текстом. Это возможно?

<div class="col-sm-2 col-md-4">
  <input type="checkbox" class="read-more-state" id="post-3" />
  <h3>GCSE<small>  (14 – 15 лет)</small></h3>

  <p class="read-more-wrap">GCSE (GeneralCertificateofSecondaryEducation) – это Сертификат о среднем образовании учащегося 14-16 лет, подтверждающий необходимый уровень освоения программ по ряду академических и прикладных (связанных с дальнейшей производственной деятельностью) предметов школьного цикла.

В процессе обучения школьники знакомятся с теоретическим материалом по конкретному предмету в сочетании с самостоятельно проводимыми исследованиями, и поэтому в программу освоения некоторых дисциплин заложена и практическая работа. Срок обучения, как правило, по очной форме, длится около двух лет.

Уровень GCSE – 1-ый год обучения
<span class="read-more-target">
    Обязательные предметы и предметы по выбору
<b>
1. Английский язык
2. Английская литература
3. Математика
4. География
5. История
6. Естествознание
7. Информационно-коммуникационные технологии
8. Экономика
9. Бизнес
10. Французский язык
11. Испанский язык
12. Русский язык</b><br>
    <span>Какие предметы являются обязательными?

По некоторым предметам в обязательном порядке сдаются итоговые экзамены. Именно эти дисциплины отражают овладение основными знаниями и умениями, необходимыми в дальнейшей жизни:
Английский язык
Математика
Естественные науки
Современный иностранный язык

Предметы по выбору в каждой школе разные. Однако учащимся должна быть предоставлена возможность выбора хотя бы одного предмета из каждой нижеприведённой области знаний:
<br>
1. Блок гуманитарных дисциплин<br>
2. Блок естественнонаучных дисциплин и ИКТ<br>
3. Современные иностранные языки.<br><b>
Итого: минимум – 7 предметов.</b> </span>
</span></p>
  
  <label for="post-3" class="read-more-trigger"></label>
</div>

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}

/* Other style */ 

p {
  padding: 2%;
  
  
  border: 1px solid #ffffff;
  border-radius: .25em;
}