Fix width of one column per row in ui semantics

Question

How can I have two columns per row in the semantic interface, that one of the columns has a correction width and does not change when the browser is resized?

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

There is no special SUI way (yet), so you have to write your own CSS

There are too many SUI classes in your code.

This is not required: <div class="ui grid container">when you define another grid inside it.

Class two columnin is <div class="ui two column divided grid">also redundant.

, , , CSS, . . JS Fiddle: https://jsfiddle.net/batrasoe/5289q8fr/1/

...    
<div class="left column">
          Some Text
        </div>
        <div class="twelve wide  column">
          <div class="ui link cards">
    ...

CSS:

#grid .left.column {
  width: 200px;
}

, two wide , , , .left.column

/ - twelve wide column.

Answer 2

, flexbox, ui.

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

Answer 3

, Semantic UI . :

<style>
    .fixed-one-column {
         visibility: hidden;
     }
</style>
<div class="ui on wide column fixed-one-column">
    content#1
</div>
<div class="ui five wide column fixed-one-column">
    content#2
</div>
<div class="ui five wide column fixed-one-column">
    content#3
</div>
<script>
var max = -1;
$('.fixed-one-column').each(function() {
 if(parseFloat($(this).css('width').replace('px','')) > max) {   
    max =  parseFloat($(this).css('width').replace('px',''));
 }       
});
$('.fixed-one-column').css({'width':max+'px', 'visibility: initial'});
<script>