検索アイコンを押したら検索欄が開くようにしたい

現状の状況を画像で説明

上記の検索のアイコンを押したら

下記の画像のようになってしまう

おそらく検索欄がアイコンの幅しか開いていないです

理想はこのような動きになります

下記の画像のように検索ボタンを押したら

こちらのようになるのが理想な状態です

Slimコード

= form_with url: companies_path, class: :search_form, method: :get, local: true do |f|
   = image_tag s3_common_url(file_name: 'temp_search.jpg'), id: :header_search_box_logo
   = f.text_field :free_word, value: @free_word, placeholder: '社名、所在地、キーワード', class: :search_text

CSS

.search_form {
  display: block; /* これがないと消える*/
  position: relative; /* 画像の絶対パス*/
}

.search_form:before, .search_text {
  position: absolute; /* 相対パス*/
  top: 0; 
  right: 0; /* 左に置きたい場合はleftにする*/
  // width: 48px; /* 全体の丸の大きさ*/
  height: 68px;  
  margin: 0;
  border-radius: 24px;
  font-size: 16px; /* 虫眼鏡の大きさ*/
}

.search_form:before {
  z-index: 100;
  line-height: 48px; /* 虫眼鏡マークの高さ*/
  background: #65b1e4; 
  color: #FFF; /* 虫眼鏡マークの色*/
  text-align: center; /* 虫眼鏡マークがこれがないと左によってしまう*/
  top: 9px;/*追加*/
  right: 11px;/*追加*/
  height: 48px;/*追加*/
}

.search_text {
  opacity: 0; /* これが消えると青色が消える*/
  z-index: 200; /* これがないと押せなくなる*/
  cursor: pointer; /* カーソルみたいな*/
  transition: 0.5s; /* 検索欄が広がるスピード*/
  outline: 0; /* 検索欄のボックスの線*/
  border: solid 1px #ccc;
  border-radius: 24px;
  padding-left: 16px; /* 検索欄のplaceholderの左の隙間*/
}
.search_text:focus {
  opacity: 1; /* これは検索欄の表示の濃さになる*/
  width: 30%; /* 検索欄の幅*/
  cursor: text;
  z-index: 1; /* 追加*/
}

解決したいこと

理想の動きになるように実現したく思っています。

どなたか教えていただけますと幸いです。
よろしくお願いいたします。

問題を発見したこと

.header_right   このクラスを追加
  = form_with url: companies_path, class: :search_form, method: :get, local: true do |f|
    = image_tag s3_common_url(file_name: 'temp_search.jpg'), id: :header_search_box_logo
    = f.text_field :free_word, value: @free_word, placeholder: '社名、所在地、キーワード', class: :search_text

こちらの追加したクラスに