Make materilize css dropdown smaller in size

I need to make the drop down of the materialize css smaller in size.

The font the spacing and everything. I have trued with width: 50%; height: 50% but this doesnt reduce the size

Now:

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <title>Page Title</title>
</head>

<body>

    <div class="row">
        <div>
            <div class="col s12">

                <div class="col s6">
                    <input type="checkbox" class="filled-in single-opt" id="selectAll">
                    <label for="selectAll" id="selectAllLabel">Select all</label>
                </div>
                <div class="col s6">
                    <select id="select">
                        <option selected>Google Docs</option>
                        <option>Google Forms</option>
                        <option>Google Sheets</option>
                    </select>
                </div>
            </div>
            <script>
                $(document).ready(function() {
                    $('select').material_select();
                });
            </script>

</body>

</html>

Solution

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Page Title</title>
</head>

<body>
  <div class="row">
    <div class="col l4">
      <input type="checkbox" class="filled-in single-opt" id="selectAll">
      <label for="selectAll" id="selectAllLabel">Select all</label>
    </div>
    <div class="col l4" ">
                <select id="select ">
                    <option selected>Google Docs</option>
                    <option>Google Forms</option>
                    <option>Google Sheets</option>
                </select>
            </div>
        </div>
        
        <script>
            $(document).ready(function() {
                $('select').material_select();
            });
        </script>
</body>
</html>

try to refer grid layout of there..