JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
<img src="https://png.icons8.com/metro/40/000000/graduation-cap.png">
<input />
<div class="funny">
<img src="https://lh3.googleusercontent.com/-OX10v8tUiCY/AAAAAAAAAAI/AAAAAAAADE8/QcezYUDPvxU/s96-c/photo.jpg">
</div>
</div>

SCSS

.parent{
  display:flex;
  width:100%;
  height:40px;
  input{
    flex:1;
    
    &:focus + div{
        display: none;
      }
  }
  
  img{
    height:100%;
    max-height:100%;
    width:auto;
  }
  
  .funny{
    display:flex;
  }
}

JavaScript

setTimeout(() => document.querySelector('.funny img').style.display = 'block', 0)