Highlight border of inner div and outer div on mouseover?

Question

css

You need to do this in bootstrap.
It seems to work, but the border of the outer div and the inner div are not included at the same time.
How can I make them change color at the same time.

spoiler

<div class="row">
                   <div class="col-sm-4  text-left">
                       <div class="box2 mb-1 d-flex ">
                           <div class=" iconx align-self-center">
                           </div><div class="iconx-text  align-self-center"><p class="icaption">30 Років Досвіду</p>Вже давно відомо, що читабельний зміст буде заважати зосередитись людині, яка оцінює композицію сторінки.</div>
                       </div>
                   </div> 
</div>

.iconx{
        width:60px;
        height:60px;
        background: #fafafa;
        top:65px;
       
   }

.iconx:hover{
       
        background:   #fac012;
   }
   
   .iconx-text{
      margin-left:20px;
      width:280px;
      text-align:left;
      color:#afafaf;
      font-size:1em;
   }

   .icaption{
    font-size:1.25em; 
    color:black;
   }
.box2 {

      width:370px;
      height:190px;
      border: 2px solid  #fafafa;
      background:white;
     
}
       .box2:hover{
        border-color: #fac012;
                }

Answer 1

I already understood that jquery is indispensable.