Fix width of one column in a row in Semantic ui

Question

How can I have two column in a row in Semantic UI that one of column have a fix width and doesn't change with resizing of browser?

I tried this, but something went wrong:

<div class="ui grid container">
  <div class="ui two column divided grid">
    <div class="row">
      <div class="ui four wide  column" style="width= 250px;">
      </div>
      <div class="ui twelve wide  column">
        <div class="ui link cards">
          <div class="card">
            <div class="image">
              <img src="./lib/img/elliot.jpg">
            </div>
            <div class="content">
              <div class="header">Matt Giampietro</div>
              <div class="meta">
                <a>Friends</a>
              </div>
              <div class="description">
                Matthew is an interior designer living in New York.
              </div>
            </div>
            <div class="extra content">
              <span class="right floated">
              Joined in 2013
              </span>
              <span>
              <i class="user icon"></i>
              75 Friends
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

I solved this by using flexbox which ui grid uses.

<div class="ui two grid">
  <div class="column" style="flex: 1;"></div>
  <div class="column" style="flex: 0 0 300px;"></div>
</div>