写真付 CSSの2行文字の大きさが異なる場合に記載方法

Question

#追記

現在のイメージです。atsuchiさんへ

お世話になります。箱の中の２行の文字の大きさについてCSSの質問となります。

#やりたいこと

上記画像のように

小さめの文字で「サンプルＡ」
大き目の文字で　「１００人」

と表示させたいです。

#ためしたこと

#HTML

<div class="row">
  <div class="col-sm-4">
    <div class="mainbox">サンプルＡ
      <span>1００人</span>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="mainbox">サンプルＡ
      <span>1００人</span>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="mainbox">サンプルＡ
      <span>1００人</span>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-4">
    <div class="mainbox">サンプルＡ
      <span>1００人</span>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="mainbox">サンプルＡ
      <span>1００人</span>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="mainbox">サンプルＡ
      <span>1００人</span>
    </div>
  </div>
</div>

#CSS

.mainbox {
 font-size: 70%;
 font-weight: 900;
 border: 1px solid #ccd0d6;
 border-radius: 15px 15px 15px 15px;
 margin: 5px;
 text-align: center;
 padding: 10px
}
.mainbox span{
  display: block;
  font-size:150%
}

#現状の写真
現状は以下のようになっています。PC表示

回答者様のおかげでPC表示は要件通りに設定できました（ありがとうございます！）
しかし現状スマホなどのレスポンシブデザインにした時に以下のようになってしまいます。

縦ではなく、1行３つ箱があるのように以下のように設定したいです。

#レスポンシブデザイン

スマホの時でも以下のような表示にしたいです。

宜しくお願いします。

Answer 1

<div class="tata"><div>
  サンプルＡ<span>1００人</span>
  </div><div>
  サンプルＡ<span>1００人</span>
  </div><div>
  サンプルＡ<span>1００人</span>
  </div><div>
  サンプルＡ<span>1００人</span>
  </div><div>
  サンプルＡ<span>1００人</span>
  </div><div>
  サンプルＡ<span>1００人</span>
  </div>
</div>

* {
  margin: 0;
  padding: 0
}
.tata div {
 width: 30vw;
 display: inline-block;
 font-size: 70%;
 font-weight: 900;
 border: 1px solid #ccd0d6;
 border-radius: 15px 15px 15px 15px;
 margin-left: 2.5vw;
 text-align: center;
 padding: 10px;
 box-sizing: border-box
}
.tata div span{
  display: block;
  font-size:150%
}

サンプル

Comments

[kyoya0819]

HTML修正しないで使ったけどBootstrapの書き方違う気が...

[退会済みユーザー]

ありがとうございます。回答頂いている間にスマホデザインを追記していて入れ子になっていました。お手数おかけしますがスマホのやりたいイメージの部分をご確認頂けると幸いです。いまasuchiさんのやりかたを試しています。

[kyoya0819]

サンプルをご覧いただければと思います。

[退会済みユーザー]

ありがとうございます。HTMLとCSS(サンプル適用)したところ縦に6行になってしまいました。
３つのボックスを1行に表示させたいです。以下のようなイメージです。やりたいことの画像のイメージです。
□□□
□□□

お手数おかけします。

[kyoya0819]

Bootstrapを使わなければいけない制約はありますか？

[退会済みユーザー]

いえ、Bootstrapを使用しなくても大丈夫です。いま質問全て書き換えますね。少々お待ちください。

[退会済みユーザー]

asuchiさん　質問を最新のものに書き換えしました。引き続き宜しくお願いします。PC表示はやりたい事を実現する事ができました！ありがとうございます！

[kyoya0819]

追記しました。
サンプルをご確認の上、実現したいものでしたらコピペしてみてください。

[退会済みユーザー]

ありがとうございます。Pen上の動きを確認ました。パーフェクトです。しかしソースをコピペするとPC表示でボックスが１行で改行され6行表示されてしまいます。

[kyoya0819]

ちょっと改行の関係もあると思いましたので修正します。

[kyoya0819]

念のためページ全体のコードを提示していただけませんか？
容量大きいようでしたらGithubやCodePenでも構いません

[退会済みユーザー]

できました！asuchiさんのcodepenで正しく動いていたので何がいけないのか自分のソースを探った所以下を外す事で正しく表示される事がわかりました。丁寧でしかも早く的確に教えて頂いて本当にありがとうございました。htmlとcssの質問をこれからさせて頂く事が多々あると思いますので引き続き宜しくお願い致します。
main {
max-width: 960px;
margin: 0 auto;
}

[kyoya0819]

解決して何よりです。

[退会済みユーザー]

こういう丁寧で的確で優しい技術者の方に出会えて本当に嬉しいです。ありがとうございました。