How to use the semantic-ui-react.Grid.Row function in semantic-ui-react

<header size="small">
            Start learning on {SITE_NAME} today!
          </header>
          
        
      
    

    {/* Mobile */}
    
      
        <img size="large" src="/img/challenge/r-correct-c.gif">
      
    
    
      
        
          <header size="large">
            
              "So, are you ready to learn?"
              
                <i>—{MASCOT_NAME_LONG}</i>
              
            
          </header>
          <header size="small">
            Start learning on {SITE_NAME} today!
          </header>

import React from 'react'

import { Grid, Image } from 'semantic-ui-react'

import ArrowRight from '../../images/icon-arrow-right.svg'
import ArrowBlkImage from '../../images/icon-arrow-blk.svg'

import styled from 'styled-components'
import Balance from '../common/Balance'

// TODO: Refactor common code with KeyListItem
const CustomGridRow = styled(Grid.Row)`
   &&& {
      margin-left: 20px;
      border-left: 4px solid #f8f8f8;
      cursor: pointer;

      &.wide {
         margin-left: 0px;
         border-left: 0px;
      }

      .main-row-title {
         font-weight: 600;
         width: auto;
         padding-right: 0px;
         flex: 1;
         word-break: break-all;

<label>Delay</label>
                        <input type="number" placeholder="Delay" value="{routeObject.delay}">
                    
                
                
                    
                        <label>Headers</label>
                        
                    
                
                
                    
                        <label>Response object</label>
                        
                    
                

                

import IconTAcct from '../../images/IconTAcct'
import IconTKeyDelete from '../../images/IconTKeyDelete'
import IconTContract from '../../images/IconTContract'
import IconTCall from '../../images/IconTCall'
import IconTTransfer from '../../images/IconTTransfer'
import IconTStake from '../../images/IconTStake'
import IconTKeyNew from '../../images/IconTKeyNew'

import ArrowRight from '../../images/icon-arrow-right.svg'
import ArrowBlkImage from '../../images/icon-arrow-blk.svg'

import { Grid, Image } from 'semantic-ui-react'

import styled from 'styled-components'

const CustomGridRow = styled(Grid.Row)`
   &&& {
      margin-left: 20px;
      border-left: 4px solid #f8f8f8;

      .col-image {
         margin-left: -15px;
         width: 40px;
         flex: 0 0 40px;
         padding-left: 0px;

         > div {
            border: 1px solid #e6e6e6;
            background: #fff;
            border-radius: 100%;
            display: flex;
            align-items: center;

const CreateAccountSection = ({ successMessage, errorMessage, children }) => (
   
      
         
            Choose a Username
         
      
      
         
            {children}
         
         
            
               {successMessage && (
                  
                     
                        Congrats! this name is available.
                     
                  
               )}
               {errorMessage && (
                  
                     
                        Username is taken. Try something else.

import React from 'react'

import { Grid, Image } from 'semantic-ui-react'

import MainImage from '../common/MainImage'

import ArrowRight from '../../images/icon-arrow-right.svg'
import ArrowBlkImage from '../../images/icon-arrow-blk.svg'

import styled from 'styled-components'

const CustomGridRow = styled(Grid.Row)`
   &&& {
      margin-left: 20px;
      border-left: 4px solid #f8f8f8;
      cursor: pointer;

      .col-image {
         margin-left: -33px;
         width: 40px;
         flex: 0 0 40px;
         padding-left: 0px;

         > div {
            margin: 0 24px 0 18px;
         }
      }