title: Formatting React Semantic UI List 'Field Name' and 'Value'
body: <p>How do I format the React Semantic UI list element (<a href="https://react.semantic-ui.com/elements/list/" rel="nofollow noreferrer">https://react.semantic-ui.com/elements/list/</a>) similar to style used by default React Semantic UI form (<a href="https://react.semantic-ui.com/collections/form/#types-form" rel="nofollow noreferrer">https://react.semantic-ui.com/collections/form/#types-form</a>). I am trying ensure both the Form Fields and Resulting listing are uniformly designed.  Thanks!</p>
  <pre><code>         &lt;Segment&gt;
            &lt;List divided verticalAlign=&quot;middle&quot;&gt;
              {content.name &amp;&amp; content.name &amp;&amp; (
                &lt;List.Item&gt;
                  &lt;List.Content&gt;Name: {content.title}&lt;/List.Content&gt;
                &lt;/List.Item&gt;
              )}
  
              {content.description &amp;&amp; (
                &lt;List.Item&gt;Description: {content.description}&lt;/List.Item&gt;
              )}
              {content.ContractingProcess &amp;&amp; (
                &lt;List.Item&gt;
                  Contracting Process: {content.ContractingProcess}
                &lt;/List.Item&gt;
              )}
  
              {content.rationale &amp;&amp; content.rationale.data &amp;&amp; (
                &lt;List.Item&gt;
                  &lt;span&gt;Rationale:&lt;/span&gt;
                  &lt;p
                    dangerouslySetInnerHTML={{
                      __html: content.rationale.data,
                    }}
                  /&gt;
                &lt;/List.Item&gt;
              )}
  
              {content.ModificationType &amp;&amp; (
                &lt;List.Item&gt;
                  Modification Type: {content.ModificationType.title}
                &lt;/List.Item&gt;
              )}
  
              {content.oldContractValue &amp;&amp; (
                &lt;List.Item&gt;
                  Old Contract Value: {content.oldContractValue}
                &lt;/List.Item&gt;
              )}
  
              {content.oldContractValue_currency &amp;&amp; (
                &lt;List.Item&gt;
                  Old Contract Value Currency:
                  {content.oldContractValue_currency.title}
                &lt;/List.Item&gt;
              )}
  
              {content.newContractValue &amp;&amp; (
                &lt;List.Item&gt;
                  New Contract Value:{content.newContractValue}
                &lt;/List.Item&gt;
              )}
  
              {content.newContractValue_currency &amp;&amp; (
                &lt;List.Item&gt;
                  New Contract Value Currency:
                  {content.newContractValue_currency.title}
                &lt;/List.Item&gt;
              )}
  
              {content.oldContractPeriod_startDate &amp;&amp; (
                &lt;List.Item&gt;
                  Old Contract Start Date:
                  {content.oldContractPeriod_startDate}
                &lt;/List.Item&gt;
              )}
  
              {content.oldContractPeriod_endDate &amp;&amp; (
                &lt;List.Item&gt;
                  Old Contract End Date:
                  {content.oldContractPeriod_endDate}
                &lt;/List.Item&gt;
              )}
              {content.oldContractPeriod_maxExtentDate &amp;&amp; (
                &lt;List.Item&gt;
                  Old Contract Period Extent Date:
                  {content.oldContractPeriod_maxExtentDate}
                &lt;/List.Item&gt;
              )}
  
              {content.newContractPeriod_startDate &amp;&amp; (
                &lt;List.Item&gt;
                  New Contract Period Start Date:
                  {content.newContractPeriod_startDate}
                &lt;/List.Item&gt;
              )}
  
              {content.newContractPeriod_endDate &amp;&amp; (
                &lt;List.Item&gt;
                  New Contract Period End Date:
                  {content.newContractPeriod_endDate}
                &lt;/List.Item&gt;
              )}
  
              {content.newContractPeriod_maxExtentDate &amp;&amp; (
                &lt;List.Item&gt;
                  New Contract Period Max ExtentDate:
                  {content.newContractPeriod_maxExtentDate}
                &lt;/List.Item&gt;
              )}
            &lt;/List&gt;
          &lt;/Segment&gt;
  </code></pre>
  <p>Example Images:</p>
  <p><a href="https://i.stack.imgur.com/AkRL9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AkRL9.png" alt="Unformatted List items" /></a></p>
  <p><a href="https://i.stack.imgur.com/Gex96.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gex96.png" alt="Formatted Editor Form" /></a></p>