Fix width of one column in a row in Semantic ui

There is no SUI specific way (yet), so you'll have to write custom CSS

You are using too many SUI classes in your code.

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

The two column class in <div class="ui two column divided grid"> is redundant as well.

So solve your problem, you can change the first column classes and then use CSS to fix its width. See 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">

And corresponding CSS property:

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

Don't use the classes such as two wide in a column you want to keep fixed as they have some associated width properties that might override the behavior of .left.column

For Responsiveness, you'll have to manage the padding/margins a bit as well near the breakpoint or use media queries to update the class of the twelve wide column.

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>