CSS to make two react-quill components have different widths

Question

I have two react-quill components appearing on a page and I would like them to have different widths. Right now I have the CSS:

.ql-toolbar {
  width: 600px !important
}
.ql-container {
  width: 600px !important;
  height: auto !important;
}
.ql-editor {
  width: 100% !important;
  height: auto !important;
}

which makes both the react-quill components I have 600 pixels in width. However, I would like to make one of the components have 600 pixels and the other to have 500 pixels. Is this doable in CSS or maybe as a styles prop on the react-quill component? I haven't been able to figure out how those work.