Как сделать текст слева или справа от загрузочного столбца

Question

Я пытаюсь сделать html и css этого прикрепленного изображения:

Я думал о создании 2 столбцов начальной загрузки и некоторых <p> теги, кто-нибудь может взглянуть на код и сказать, хорошая ли это идея или нет?

.price-container {
  width: 380px;
  height: 215px;
  background-color: #fff;
  box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
  -webkit-box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
  -moz-box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
}

.btn-start-price {
  font-weight: bold;
  height: 35px;
  width: 250px;
  background-color: #30637b;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 0%;
}

.price-from-text {
  font-size: 7px;
  font-weight: bold;
}

.price-part1 {
  font-size: 70px;
  font-weight: bolder;
  position: relative;
  right: 36%;
}

.price-from-text {
  position: absolute;
  top: 20%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row d-flex justify-content-center">
  <div class="mt-5 col-md-4 d-flex justify-content-center">
    <div class="price-container">
      <div class="col text-center">
        <div class="row d-flex justify-content-center">
          <div class="col-md-6 mt-4">
            <p class="price-from-text">A PARTIR DE</p>
            <p class="price-part1">9</p>
          </div>
        </div>
        <button type="button" class="btn-start-price  mt-3 btn btn-sm">COMMENCER MAINTENANT</button>
      </div>
    </div>
  </div>
</div>

Как сделать первую правую часть (à partir de / 9) справа от столбца, а другую часть слева от столбца?

Answer 1

Вы можете сделать это с text-left и text-right классами начальной загрузки:

.price-card {
  background-color: #fff;
  box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
  -webkit-box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
  -moz-box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
}

.from-price {
  font-size: 7px;
  line-height: 1;
}
.start-price {
  margin-top: -7px;
  height: 70px;
  font-size: 70px;
  line-height: 1;
}
.end-price {
  font-size: 40px;
  line-height: 40px;
}
.per-price {
  font-size: 22px;
  line-height: 22px;
}

.btn-price {
  background-color: #30637b;
  color: #fff;
  border: none;
  border-radius: 0 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <div class="price-card p-3 mx-auto">
    <div class="row no-gutters my-4 pt-1 pb-3">
      <div class="col text-right font-weight-bold pr-1">
        <div class="from-price text-uppercase">A partir de</div>
        <div class="start-price">9</div>
      </div>
      <div class="col text-left pl-1">
        <div class="end-price">€90</div>
        <div class="per-price pt-1">/ mois</div>
      </div>
    </div>
    <div class="mt-3">
      <button type="button" class="btn-price btn-block btn btn-sm text-uppercase font-weight-bold py-2">Commencer maintenant</button>
    </div>
  </div>

</div>