CSS - 3-колоночный контент не так отзывчив

Question

Вот мой jsfiddle с кодом, чтобы показать, что мне удалось кодировать до сих пор: https://jsfiddle.net/k9L5wd0y/

В данный момент это отзывчиво, но у меня проблема с текстами, когда размер экрана становится меньше.Тексты перемещаются ниже нумерации.Я хочу, чтобы он оставался неизменным, несмотря на разные размеры экрана (число и текст рядом).

Любая помощь будет принята с благодарностью!

.text-center {
  text-align: center !important;
}

.panel-wrap {
  display: block;
  clear: both;
  width: 100%
}

.panel-wrap::after {
  clear: both;
  content: "";
  display: block
}

.panel-wrap .panel {
  display: block;
  clear: both;
  width: 100%;
  margin-bottom: 1.4em
}

@media only screen and (min-width:600px) {
  .panel-wrap .panel {
    clear: none
  }
}

@media only screen and (min-width:600px) {
  .panel-wrap.double .panel {
    width: calc(50% - 30px);
    float: left;
    margin-left: 20px
  }
}

.panel-wrap.double.right-to-left .panel:first-child {
  float: right;
  margin-right: 0
}

.panel-wrap.double.right-to-left .panel:last-child {
  float: left;
  margin-right: 2.35765%
}

@media only screen and (min-width:600px) {
  .panel-wrap.triple .panel {
    width: calc(33.33333% - 26.66667px);
    float: left;
    margin-left: 20px
  }
}

.bundles-wrapper {
  background-color: #FBF7F4;
  padding: 35px 20px;
  margin-bottom: 30px;
}

.rectangle21 {
  background-color: rgba(251, 247, 244, 1.0);
  top: 523px;
  height: 492px;
  width: 1038px;
  position: absolute;
  margin: 0;
  left: -15px;
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

.grid-uniform .group {
  background-color: rgba(255, 255, 255, 0.0);
  top: 580px;
  height: 67px;
  width: 912px;
  position: absolute;
  margin: 0;
  left: 53px;
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

.panel .oval,
.panel .oval1,
.panel .oval2 {
  background-color: rgba(255, 255, 255, 0.0);
  height: 26px;
  width: 29px;
  display: inline-block;
  float: left;
  margin: 0;
}

.panel .a1 {
  background-color: rgba(255, 255, 255, 0.0);
  height: auto;
  width: 28px;
  margin: 0;
  font-family: 'Kent4F', Helvetica, Arial, serif;
  position: absolute;
  /* left: 10px; */
  font-size: 19.0px;
  color: rgba(255, 255, 255, 1.0);
  text-align: center;
  letter-spacing: .32px;
  line-height: 23.0px;
}

.panel .chooseyourbundle {
  background-color: rgba(255, 255, 255, 0.0);
  display: inline-block;
  margin: 0;
  left: 45px;
  /* float: right; */
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  /* transform: rotate(0); */
  font-family: 'ScalaSansPro-Regular', Helvetica, Arial, serif;
  font-size: 17.0px;
  /* color: rgba(255,255,255,1.0); */
  /* float: right; */
  letter-spacing: .28px;
  /* line-height: 21.0px; */
  margin-left: 25px
}

.panel .a2 {
  background-color: rgba(255, 255, 255, 0.0);
  height: auto;
  width: 28px;
  position: absolute;
  margin: 0;
  font-family: 'Kent4F', Helvetica, Arial, serif;
  font-size: 19.0px;
  color: rgba(255, 255, 255, 1.0);
  text-align: center;
  letter-spacing: .32px;
  line-height: 23.0px;
}

.panel .selectyourfrequenc {
  background-color: rgba(255, 255, 255, 0.0);
  height: auto;
  width: 202px;
  display: inline-block;
  margin: 0;
  font-family: 'ScalaSansPro-Regular', Helvetica, Arial, serif;
  font-size: 17.0px;
  text-align: left;
  letter-spacing: .28px;
  line-height: 21.0px;
  margin-left: 25px;
}

.panel .a3 {
  background-color: rgba(255, 255, 255, 0.0);
  height: auto;
  width: 30px;
  position: absolute;
  margin: 0;
  font-family: 'Kent4F', Helvetica, Arial, serif;
  font-size: 19.0px;
  color: rgba(255, 255, 255, 1.0);
  text-align: center;
  letter-spacing: .32px;
  line-height: 23.0px;
}

.panel .sitbackandreadyt {
  background-color: rgba(255, 255, 255, 0.0);
  height: auto;
  width: 217px;
  display: inline-block;
  margin: 0;
  font-family: 'ScalaSansPro-Regular', Helvetica, Arial, serif;
  font-size: 17.0px;
  text-align: left;
  letter-spacing: .28px;
  line-height: 21.0px;
  margin-left: 25px;
}

<div class="bundles-wrapper">
  <h4 class="text-center">How it works</h4>
  <div class="panel-wrap triple pinned">
    <article class="panel">
      <img class="oval" src="https://anima-uploads.s3.amazonaws.com/5bceb57602cfb8000aa1a8f4/5bceb64602cfb80009043b16/5bceb64823b9cc000acfb161/img/desktop---home-oval 4@2x.png" anima-src="https://anima-uploads.s3.amazonaws.com/5bceb57602cfb8000aa1a8f4/5bceb64602cfb80009043b16/5bceb64823b9cc000acfb161/img/desktop---home-oval 4@2x.png">
      <div class="a1">1</div>
      <p class="chooseyourbundle">Choose your bundle</p>
    </article>
    <article class="panel">
      <img class="oval1" src="https://anima-uploads.s3.amazonaws.com/5bceb57602cfb8000aa1a8f4/5bceb64602cfb80009043b16/5bceb64823b9cc000acfb161/img/desktop---home-oval 4@2x.png" anima-src="https://anima-uploads.s3.amazonaws.com/5bceb57602cfb8000aa1a8f4/5bceb64602cfb80009043b16/5bceb64823b9cc000acfb161/img/desktop---home-oval 4@2x.png">
      <div class="a2">2</div>
      <p class="selectyourfrequenc">Select your frequency</p>
    </article>
    <article class="panel">
      <img class="oval2" src="https://anima-uploads.s3.amazonaws.com/5bceb57602cfb8000aa1a8f4/5bceb64602cfb80009043b16/5bceb64823b9cc000acfb161/img/desktop---home-oval 4@2x.png" anima-src="https://anima-uploads.s3.amazonaws.com/5bceb57602cfb8000aa1a8f4/5bceb64602cfb80009043b16/5bceb64823b9cc000acfb161/img/desktop---home-oval 4@2x.png">
      <div class="a3">3</div>
      <p class="sitbackandreadyt">Sit back and ready to get crafty!</p>
    </article>
  </div>
</div>

Answer 1

Вам нужно изменить ширину p тегов на 100%

.panel .sitbackandreadyt {
  /*width: 217px;*/
  width: 100%;
}

, вы не можете использовать word-wrap, потому что у вас фиксированная ширина и этой ширины недостаточно для текста внутри.