JSFiddle - React, Tailwind, and code Playground

by Shank09

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
<div class="container">
   <div class="col s12 m6">
      <div class="card">
         <div class="card-content">
            <span class="card-title">
              <i class="material-icons">business_center</i>
                My List
              <span id="listcount">
                (12)
              </span>
              <div class="icons">
                <span class="new badge yellow" data-badge-caption="">
                  1
                </span>
                <span class="new badge red" data-badge-caption="">
                  12
                </span>
              </div>
              <div class="box">
                <input class="search" type="text" placeholder="Search" />
                <div class="icon right"><i class="material-icons right">search</i></div>
              </div>
              
            </span>
           
             
            <div class="">
               <table class="table striped table-hover table-curved" ng-controller="Hello">
                  <tbody>
                     <tr>
                        <td><b>12345</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                     <tr>
                        <td><b>12345678</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                     <tr>
                        <td><b>123</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                     <tr>
                        <td><b>123</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                     <tr>
                        <td><b>123</b></td>
                       ...

CSS

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

.box {
    position: relative;
    width: 220px;
}
.search {
    width: 200px;
    max-width:0;
    padding: 5px;
    transition: all .5s ease;
    position:absolute;
    right:20px;
    box-sizing:border-box;
    opacity:0;
    margin-left: auto;
}
.search.expanded {
    max-width:200px;
    opacity:1;
    margin-left: auto;
}
.icon {
    cursor: pointer;
    margin-left: auto;
}
body {
  background-color: #F3F3F2;
}

table.striped > tbody > tr > td:first-child {
  border-radius: 10px 0 0 10px;
}

table.striped > tbody > tr > td:last-child {
  border-radius: 0 10px 10px 0;
}

#listcount {
  font-size: 18px;
  color: #727d93;
}

.icons {
  margin-left: auto;
}

.card .card-content .card-title {
  display: flex;
  align-items: center;
}

JavaScript

$('.icon').click(function () {
    $('.search').toggleClass('expanded');
});