How to display a list in a line separate by commas

[newcoder1010]

Hello,

<div data-quickedit-field-id="block_content/56/field_states/en/full" class="field field--name-field-states field--type-list-string field--label-above quickedit-field">
    <div class="field--label">States</div>
          <div class="field--items">
              <div class="field--item">Arizona</div>
          <div class="field--item">Florida</div>
          <div class="field--item">Iowa</div>
          <div class="field--item">Vermont</div>
              </div>
      </div>

Currently they are listed as a list like this:

AZ

FL

How can I style it to display as:

AZ, FL

Please advise!

[dsonesuk]

Try

.field--item {display: inline-block;}

.field--item:not(:last-child):after {content:", ";}

.field--item:last-child:after {content:".";}

[newcoder1010]

It worked with the first two lines. Last line puts comma at the end so I did not use  the last line. Thanks!