сделать элементы div внутри контейнера адаптивными

Question

так что в основном у меня есть внешний div, который содержит 5 внутренних div.

------------------------------------
| <div title>                       |   

|             <div value><div unit> |

|                      <div subvalue|

|                         <div date>|

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

css код:

.container{
    border: 1px solid #57c0e8;
    background-color: white;
    cursor: pointer;
    height: auto;
    width: auto;
    border-radius: 10px;
}

.title {
    color:grey;
    font-size: 0.8em;
    margin-left:2%;
}

.valueAndUnit {
    text-align: center;
    display: block;  
}

.value{
    margin-top: 3%;
    min-height:25px;
    font-size: 2.1em;
    display: inline-block;
}

.unit {
    display: inline-block;
}

.subValue {
    text-align: right;
    min-height:25px;
    font-size:1em;
}   

.date {
    min-height:25px;
    color:lightslategrey;
    text-align: right;
    font-size: 1em;
}

.subValueAndDate {
    margin-right: 6%;
}

@media only screen and (max-width: 770px) {

    .title { 
       font-size: 1.3vw; 
    }
    .value{
        font-size: 3.1vw;
    }

 .unit{
     font-size:2vw;
 }

 .subValue{
     font-size:2.5vw;
 }

 }

это фактический контейнер:

html:

<div className={styles.container}>
            <div className={styles.title}>
            {title}
            </div>
            <div className={styles.valueAndUnit} style={style}>
            <div className={styles.value}>
            {value}
            </div>
            <div className={styles.unit}>
            {unit}
            </div>
            </div>
            <div className={styles.subValueAndDate}>
            <div className={styles.subValue}>
            {subValue}
            </div>
            <div className={styles.date}>
            {date}
            </div>
            </div>
        </div>

Answer 1

Поскольку вы отметили Bootstrap, вы можете использовать стиль Grid фреймворка и внести некоторые незначительные изменения, используя классы flexbox.

HTML:

<div class="outer-div">
    <div class="row d-flex">
        <div class="col-6 text-left">
            yes
        </div>
    </div>
    <div class="row d-flex">
        <div class="col-12 text-center">
            1111 unit
        </div>
    </div>
    <div class="row d-flex flex-row-reverse">
        <div class="col-6 text-right">
            1234
        </div>
    </div>
    <div class="row d-flex flex-row-reverse">
        <div class="col-10 text-right">
            05/14/3030 4:12
        </div>
    </div>
</div>

CSS:

.outer-div {
    border: solid green 1px;
    border-radius: 5px;
    width: 35%;
    margin-left: 30%;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 1%;
}

Пример фрагмента:

.outer-div {
	border: solid green 1px;
	border-radius: 5px;
	width: 35%;
	margin-left: 30%;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-div">
	<div class="row d-flex">
		<div class="col-6 text-left">
			yes
		</div>
	</div>
	<div class="row d-flex">
		<div class="col-12 text-center">
			1111 unit
		</div>
	</div>
	<div class="row d-flex flex-row-reverse">
		<div class="col-6 text-right">
			1234
		</div>
	</div>
	<div class="row d-flex flex-row-reverse">
		<div class="col-10 text-right">
			05/14/3030 4:12
		</div>
	</div>
</div>

Пример кода здесь .